在 Angular 中，异步验证可以通过 AsyncValidatorFn 函数来实现。异步验证通常用于验证与服务器进行交互的表单字段，例如检查唯一性、验证邮件地址等。

如果在异步验证过程中出现错误，可以使用 FormControl 的 setErrors() 方法来设置错误消息。以下是一个示例代码，演示了如何在异步验证失败时打印错误消息：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators, AsyncValidatorFn } from '@angular/forms';
import { Observable, of } from 'rxjs';

// 异步验证函数示例，模拟一个检查用户名是否唯一的异步验证
const uniqueUsernameValidator: AsyncValidatorFn = (control: FormControl): Observable => {
  // 模拟异步请求，这里使用的是 Observable.of() 来创建一个立即完成的 Observable
  return of({ unique: true }).pipe(
    // 模拟延迟，实际中可以替换为实际的异步请求
    delay(1000),
    map(() => {
      // 如果用户名已存在，返回错误对象
      if (control.value === 'existingUsername') {
        return { unique: false };
      }
      // 否则返回 null 表示验证通过
      return null;
    })
  );
};

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

      
      
用户名已存在
    
  `,
})
export class MyFormComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      username: ['', [Validators.required], [uniqueUsernameValidator]],
    });
  }
}

在上述代码中，我们定义了一个名为 uniqueUsernameValidator 的异步验证函数，用于检查用户名是否唯一。在 uniqueUsernameValidator 中，我们使用 Observable.of() 创建一个立即完成的 Observable 来模拟异步请求。在实际应用中，你可以替换为实际的异步请求。

当异步验证完成后，我们使用 map() 操作符来处理验证结果。如果用户名已存在，我们返回一个包含错误对象 { unique: false } 的 Observable；否则，我们返回一个 null 表示验证通过。

在模板中，我们使用 form.controls.username.errors?.unique 来显示用户名已存在的错误消息。

请注意，异步验证需要通过 formControlName 或 formGroupName 与表单进行关联。在上述代码中，我们使用 formControlName="username" 将表单控件与 HTML 输入框进行关联。