Angular响应式表单中如何在blur事件触发异步验证器？

要把异步验证器从默认的keyup（值变化）触发改为blur（失去焦点）触发，有两种实用方案，具体如下：

方案一：通过控件配置指定触发时机（推荐） #

直接在构建表单控件时设置updateOn: 'blur'，让整个控件的验证逻辑（同步+异步）都在失去焦点时执行，修改注册组件的ngOnInit方法即可：

ngOnInit(): void {
  this.registrationForm = this.fb.group({
    name: ['', Validators.required],
    username: {
      value: '',
      validators: [Validators.required],
      asyncValidators: [this.uniqueUsername.validate.bind(this.uniqueUsername)],
      updateOn: 'blur' // 关键配置：指定验证触发时机为失去焦点
    },
    password: ['', Validators.required],
  });
}

原理 #

Angular表单控件默认的updateOn值是'change'，会在每次输入值变化（比如按键抬起）时触发验证。改为'blur'后，控件状态更新、同步/异步验证都会等待输入框失去焦点后才执行，避免了频繁调用异步接口的问题。

方案二：仅异步验证在blur触发（同步验证保持实时） #

如果需要保留同步验证（比如Validators.required）的实时触发，仅让异步验证在blur时执行，可以手动绑定事件实现：

1. 在模板的username输入框上添加blur事件绑定：

<input formControlName="username" (blur)="checkUsernameUnique()">

2. 在组件类中添加触发异步验证的方法：

checkUsernameUnique() {
  const usernameControl = this.registrationForm.get('username');
  // 仅当同步验证通过时，触发异步验证
  if (usernameControl?.valid) {
    usernameControl.markAsTouched();
    // 强制更新控件状态并执行验证，不触发全局表单事件
    usernameControl.updateValueAndValidity({ onlySelf: true, emitEvent: false });
  }
}

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