Angular结合BehaviorSubject的异步校验器导致表单状态异常问题

Angular异步校验器有明确机制要求：校验器返回的Observable必须在发射校验结果后主动完成，否则表单控件状态会一直停留在PENDING状态，无法正确更新最终的有效/无效状态，进而出现状态冲突的异常表现。

• 你使用of([1, 11])时功能正常，是因为of生成的是冷Observable，发射完指定值后会自动触发完成事件，完全符合Angular校验器的要求。
• 传入BehaviorSubject时出现异常，是因为BehaviorSubject属于热Observable，默认不会主动结束，会持续监听后续新值，导致校验流程一直无法收尾，状态逻辑错乱。

按以下两步修改即可修复问题：

1. 在校验器内部新增take(1)操作符，确保每次校验只取Observable的当前值，取值完成后自动结束流，满足Angular校验器的运行要求。
   修正后的校验器参考代码：

import { take } from 'rxjs/operators';
import { AbstractControl, ValidationErrors, AsyncValidatorFn } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export function DataDuplicatedAsyncFuncValidator(list$: Observable<number[]>): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return list$.pipe(
      take(1), // 仅取当前最新值，取值后自动完成流
      map(list => {
        const inputVal = control.value;
        return list.includes(inputVal) ? { duplicated: true } : null;
      })
    );
  };
}

2. 如果需要在校验用的数字列表更新后，自动重新触发所有相关字段的校验，不要依赖流的持续发射特性，而是在列表更新的逻辑后，手动调用对应表单控件的updateValueAndValidity()方法触发重校验即可，示例逻辑如下：

// 模拟按钮更新校验列表的逻辑
updateCheckList(newList: number[]) {
  this.checkListSubject.next(newList);
  // 手动触发对应表单字段重新校验
  this.targetFormGroup.get('inputField')?.updateValueAndValidity();
}

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