Angular 11 AsyncValidator异步验证器无法返回错误如何解决

• 首先确认异步验证返回的Observable是否正常完成
  Angular异步验证器要求传入的Observable必须主动触发complete事件，才会将校验结果同步到控件的errors属性。如果你的checkUserIsPending接口返回的是未complete的热 Observable（比如自定义Subject、事件流），会导致校验状态一直处于PENDING，errors始终为null。
  修复方案是在验证器的pipe中添加take(1)操作符，确保流取到第一次返回值后主动结束：

import { take, catchError } from 'rxjs';
import { of } from 'rxjs';

export function pendingPortfolioUserRequestValidator(portfolioInviteService: PortfolioInviteService,
  portfolioId: number): AsyncValidatorFn {
  return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
    return portfolioInviteService.checkUserIsPending(portfolioId, control.value).pipe(
      take(1), // 新增这行保证流正常结束
      map((email) => {
        return (email) ? {'pendingUserExists': true} : null;
      }),
      // 可选：添加错误处理，避免接口报错导致校验卡住
      catchError(() => of(null))
    );
  };
}

如果是用Promise实现的异步校验，要确保通过resolve返回校验结果（错误对象或null），不要用reject传递校验结果，reject会被Angular识别为校验逻辑异常，不会更新errors属性。

• 确认同步校验已通过
  Angular默认会优先执行同步校验，只有所有同步校验都通过的情况下，才会触发异步校验逻辑。你可以先输入符合规则的邮箱（满足必填、正则格式要求），再查看errors的值。

• 检查控件的校验状态
  在组件中打印邮箱控件的status属性：

console.log(this.form.get('email').status);

如果状态一直是PENDING，则可确定是异步流未正常结束的问题，按照第一个方案修复即可。

• 排查是否有其他逻辑覆盖errors
  确认是否在其他地方调用了setErrors(null)、setValue时设置了emitEvent: false，或者有其他自定义校验器覆盖了返回结果。

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