Angular 如何仅在指定条件为true时调用AsyncValidator异步校验器

方案1：异步校验函数内加判断（推荐，实现最简单） #

你之前在内部写if/else报错的核心原因是没有正确返回符合Observable<ValidationErrors | null>类型的结果，无有效链接时直接返回of(null)即可代表校验通过。
首先从rxjs导入of操作符，然后修改校验函数：

import { of } from 'rxjs';

public emailAlreadyExists(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    // 无有效链接时直接返回校验通过，不调用后端接口
    if (!this.activeLink) {
      return of(null);
    }
    return this.userService.emailAlreadyExists(new RequestEmailExists({ 
      email: control.value, 
      identifier: this.user.identifier 
    })).pipe(
      map(res => res ? { alreadyExistsValidator: true } : null)
    );
  };
}

如果activeLink是动态变化的，切换后需要主动触发一次邮箱控件的校验更新已有的校验结果：

// 监听activeLink变化的逻辑中加入
this.firstFormGroup.get('email')?.updateValueAndValidity();

方案2：动态增删异步校验器 #

如果不想在校验函数中写判断逻辑，可以根据activeLink的状态动态控制校验器是否挂载：

初始化表单时判断 #

const emailAsyncValidators = this.activeLink ? [this.emailAlreadyExists()] : [];
this.firstFormGroup = this._formBuilder.group({
  email: [this.user.email, {
    validators: [Validators.required, Validators.email],
    asyncValidators: emailAsyncValidators,
    updateOn: 'blur'
  }]
})

activeLink状态切换时动态更新校验器 #

const emailControl = this.firstFormGroup.get('email');
if (this.activeLink) {
  // 状态变为有效链接时添加校验器
  emailControl?.addAsyncValidators(this.emailAlreadyExists());
} else {
  // 状态变为无效链接时移除校验器并清空已有错误
  emailControl?.removeAsyncValidators(this.emailAlreadyExists());
  emailControl?.setErrors(null);
}
// 触发校验更新
emailControl?.updateValueAndValidity();

常见报错原因说明 #

你之前用bind(this)报错是因为emailAlreadyExists是返回校验函数的工厂函数，绑定this后需要手动执行拿到最终的校验函数：

// 错误写法
asyncValidators: [this.emailAlreadyExists.bind(this)]
// 正确写法
asyncValidators: [this.emailAlreadyExists.bind(this)()]

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