Angular自定义校验器：如何使用返回Promise的方法校验表单字段？

核心问题说明 #

你当前使用的是同步校验器类型ValidatorFn，无法处理异步逻辑：你在then回调内的返回值并不会被外层的校验函数接收，导致校验结果无法正确传递给表单。

调整步骤 #

1. 修改校验器为异步校验器 #

将校验器返回类型改为AsyncValidatorFn，直接返回整个Promise链的结果，代码如下：

import { AsyncValidatorFn, AbstractControl } from '@angular/forms';

static email(usersService: UsersService): AsyncValidatorFn {
  return (control: AbstractControl): Promise<{ [key: string]: boolean } | null> => {
    const email = control.value;
    if (!email) {
      // 空值直接返回resolve的null
      return Promise.resolve(null);
    }
    // 直接返回Promise的执行结果
    return usersService.validateUsername(email).then(
      (result) => result.username ? { emailExists: true } : null
    );
  }
}

2. 表单控件绑定异步校验器 #

注意异步校验器需要放在FormControl的第三个参数位置，不要和同步校验器混写在第二个参数：

// 示例：声明表单控件
import { FormControl, Validators } from '@angular/forms';

// 第二个参数是同步校验器数组，第三个是异步校验器数组
const emailControl = new FormControl('', 
  [Validators.required, Validators.email], 
  [你的校验器类名.email(this.usersService)]
);

3. 可选：优化UsersService请求逻辑 #

Angular 12+版本中toPromise已被标记为废弃，可改用firstValueFrom处理Observable转Promise，同时可以省略多余的map操作：

import { firstValueFrom } from 'rxjs';

validateUsername(username: string): Promise<{"username": string}> {
  // 直接给post方法指定返回泛型，不需要额外map处理
  return firstValueFrom(
    this.httpClient.post<{"username": string}>('/users/username_validation', { username })
  );
}

补充说明 #

异步校验执行过程中，表单控件的status属性会变为PENDING状态，你可以利用该状态实现校验中的加载提示效果，避免用户重复提交。

内容的提问来源于stack exchange，提问作者mr_olaznog