Angular异步表单验证器触发但未更新表单有效性问题排查

问题背景 #

首次使用Angular异步表单验证器，已将其绑定到表单的asyncValidators：

• 验证器可正常触发，控制台能打印日志
• 能返回正确的验证结果（错误对象或null）
• 但表单始终处于无效状态，状态一直卡在PENDING，所有formGroup和formControl的errors属性均为null
• 移除该异步验证器后表单恢复正常，确认问题出在这个验证器上
• 组件非OnPush变更检测模式，已尝试调用ChangeDetectorRef.markForCheck()和detectChanges()，无效

相关代码 #

异步验证器代码

private validateV2Applications$(): AsyncValidatorFn {
    return (): Observable<ValidationErrors> => {
      console.log("called");
      return this.applyChargesService.rowInfo$.pipe(
        map((rowInfo) => {
          console.log('mapped');
          if (this.useApplyToInstallments && rowInfo.invalidRows.length > 0) {
            console.log('async validator is invalid!');
            return { applicationErrors: 'there are application errors' };
          }

          return null;
        }),
      );
    };
  }

表单创建代码

// fb = FormBuilder
this.creditForm = this.fb.group(
  { /* form controls */ },
  {
    validator: [this.validatecredit(), this.validateApplicationTotal()],
  },
);

this.creditForm.setAsyncValidators([this.validateV2Applications$()]);

rowInfo$ 数据源代码

private rowInfoSource = new BehaviorSubject<ApplyChargesRowInfo>({
  selectedRows: [],
  invalidRows: [],
});
public rowInfo$ = this.rowInfoSource.asObservable();

public setRowInfo(data: ApplyChargesRowInfo): void {
  this.rowInfoSource.next(data);
}

问题根源 #

Angular的异步表单验证器要求返回的Observable必须完成（complete），否则框架会认为验证尚未结束，一直将表单状态设为PENDING。

你的验证器中使用的rowInfo$是BehaviorSubject的Observable，它是一个持续推送数据的热流，永远不会自动完成，导致验证流程永远无法结束。

修复方案 #

方案1：添加take(1)操作符 #

在验证器的Observable管道中添加take(1)，只获取当前的最新值后立即完成流：

import { take } from 'rxjs/operators';

private validateV2Applications$(): AsyncValidatorFn {
    return (): Observable<ValidationErrors> => {
      console.log("called");
      return this.applyChargesService.rowInfo$.pipe(
        take(1), // 取一次数据后完成流
        map((rowInfo) => {
          console.log('mapped');
          if (this.useApplyToInstallments && rowInfo.invalidRows.length > 0) {
            console.log('async validator is invalid!');
            return { applicationErrors: 'there are application errors' };
          }
          return null;
        }),
      );
    };
  }

方案2：使用first()操作符 #

first()和take(1)效果类似，会获取第一个值后完成流，也可以附加条件过滤：

import { first } from 'rxjs/operators';

private validateV2Applications$(): AsyncValidatorFn {
    return (): Observable<ValidationErrors> => {
      console.log("called");
      return this.applyChargesService.rowInfo$.pipe(
        first(), // 等价于take(1)
        map((rowInfo) => {
          console.log('mapped');
          if (this.useApplyToInstallments && rowInfo.invalidRows.length > 0) {
            console.log('async validator is invalid!');
            return { applicationErrors: 'there are application errors' };
          }
          return null;
        }),
      );
    };
  }

进阶：实现rowInfo$更新时自动重验证 #

如果需要在rowInfo$的数据变化时自动触发表单验证，不要让验证器依赖持续流，而是手动订阅rowInfo$并触发表单验证：

// 在组件初始化时添加订阅
this.applyChargesService.rowInfo$.subscribe(() => {
  this.creditForm.updateValueAndValidity({ 
    onlySelf: true, 
    emitEvent: false // 避免触发多余的表单值变更事件
  });
});

这样既保证了数据变化时验证器重新执行，又能让每次验证的Observable正常完成，彻底解决PENDING状态问题。

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