Angular响应式表单异步验证器失效，请求修复

问题情况 #

我做了一个简单的响应式表单，想添加异步验证器，就在formBuilder的第三个参数里配置了，但验证器没生效——模板里输出的错误对象里找不到usersExists键，哪怕我刻意返回{ usersExists: true }来触发错误也没用。

初始化表单的代码 #

ngOnInit() {
  this.form = this.fb.group(
    {
      login: [
        '',
        [Validators.required, this.customValidator],
        [this.asyncValidator()],
      ]
    }],
    }
  );
}

异步验证器实现代码 #

asyncValidator(): AsyncValidatorFn {
  console.log('async');
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    console.log('control', control);
    return this.usersService.getUsers().pipe(
      tap(() => console.log('tap')),
      map((users) => {
        console.log(typeof users, users);
        return { usersExists: true }; // 我想触发错误
        // return users ? { usersExists: true } : null;
      })
    );
  };
}

当前问题表现 #

模板里通过这段代码输出错误：

<pre>{{ form.controls.login.errors | json }}</pre>

但输出结果里始终没有usersExists这个键。

修复方案 #

1. 修正FormBuilder的语法错误 #

你的fb.group参数里多了一对多余的]}，导致异步验证器的配置没被正确识别。修正后的代码：

ngOnInit() {
  this.form = this.fb.group({
    login: [
      '',
      [Validators.required, this.customValidator],
      [this.asyncValidator()]
    ]
  });
}

2. 确保异步流正常完成 #

Angular的异步验证器需要Observable流完成后才会更新错误状态。如果getUsers()返回的是持续流，要加first()操作符强制流完成：

asyncValidator(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return this.usersService.getUsers().pipe(
      first(), // 确保流完成，触发验证状态更新
      map((users) => {
        return { usersExists: true };
      })
    );
  };
}

3. 模板里增加验证状态提示（可选） #

可以加个提示判断验证是否在进行中，避免误以为验证没执行：

<div *ngIf="form.controls.login.pending">验证中...</div>
<pre>{{ form.controls.login.errors | json }}</pre>

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