angular形式下的异步验证问题

import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';

function asyncValidator(control: FormControl): Promise<any> | Observable<any> {
  return new Promise<any>((resolve, reject) => {
    // 执行异步操作，例如向服务器发送请求
    // 在异步操作完成后，调用resolve或reject来返回验证结果
  });
}

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="myControl">
      <div *ngIf="myForm.get('myControl').pending">正在验证...</div>
      <div *ngIf="myForm.get('myControl').errors?.async">验证失败</div>
    </form>
  `
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myControl: new FormControl('', Validators.required, asyncValidator)
    });
  }
}