在自定义验证器中使用 async函数，并将错误信息添加到 AbstractControl 的 errors 对象中。例如：

import { AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable } from 'rxjs';

export class CustomValidator {
  static asyncValidator(control: AbstractControl): Observable {
    return new Observable((observer) => {
      // 异步验证逻辑
      setTimeout(() => {  // 模拟异步请求
        if (control.value === 'foo') {
          observer.next({ customError: true });  // 添加自定义错误信息
        } else {
          observer.next(null);  // 无错误则返回 null
        }
        observer.complete();
      }, 2000);
    });
  }
}

在组件中使用：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomValidator } from './custom-validator';

@Component({
  selector: 'app-root',
  template: `
    

      
      

        Custom error found!
      
    
  `,
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      foo: ['', Validators.required, CustomValidator.asyncValidator],
    });
  }
}

当异步验证器返回一个 { customError: true } 的错误信息时，在模板中可以根据 form.get('foo').hasError('customError') 判断表单项是否存在该自定义错误。同时，该错误信息也会出现在表单项的 errors 对象中。