Angular5响应式表单异步验证器未触发问题求助

我来帮你排查这个问题，异步验证器没触发通常和Angular的验证执行逻辑有关，咱们一步步拆解分析：

核心原因：同步验证未通过，异步验证器不会执行 #

Angular的验证流程是先执行所有同步验证器，只有当同步验证全部通过后，才会触发异步验证器。你的email控件绑定了Validators.required，如果输入框是空的，同步验证直接失败，异步验证器根本不会被调用，自然看不到console.log的输出。

这也是为什么把异步验证器放到同步数组里能运行——同步数组里的函数不管前面的验证结果如何都会执行，但这不符合Angular的验证逻辑规范。

修复步骤 #

1. 先满足同步验证的测试条件 #

测试时先在email输入框中填入非空内容（比如adam），这样Validators.required验证通过，异步验证器才会被触发。

2. 修正异步验证器的逻辑与类型声明 #

你的代码里有两个小问题：一是索引判断错误，二是返回类型的声明不够准确，调整后就能正常工作：

static isEmailUnique(c: AbstractControl): Promise<ValidationErrors | null> {
  console.log('isEmail unique');
  const users = ['adam', 'jarda'];
  const email = c.value;
  
  return new Promise((resolve) => {
    setTimeout(() => {
      // 正确判断邮箱是否存在于数组中
      if (users.indexOf(email) !== -1) {
        resolve({ isEmailUnique: true });
        console.log('Email not unique');
      } else {
        resolve(null);
      }
    }, 1000);
  });
}

3. 确认表单控件的初始化位置正确 #

确保你把异步验证器放在FormControl的第三个参数位置（这是Angular专门留给异步验证器的参数位）：

form = new FormGroup({
  email: new FormControl('', [Validators.required], [MemberValidators.isEmailUnique]),
  firstName: new FormControl('', [Validators.required, MemberValidators.cannotContainSpace]),
  // ...其他控件
})

4. 手动触发表单验证（可选） #

如果输入内容后还是没触发，可以在模板中添加按钮，手动触发表单的触摸状态，强制触发所有验证逻辑：

<button (click)="form.markAllAsTouched()">触发验证</button>

内容的提问来源于stack exchange，提问作者Ondřej Bauer