Angular带条件自定义校验器仅单次触发校验问题排查

这是Angular响应式表单的默认校验触发机制导致的：

• 挂载在单个FormControl上的校验器，默认仅在两种场景下执行：一是当前控件自身的值发生变更，二是手动调用该控件的updateValueAndValidity()方法。校验器不会自动感知父FormGroup下其他兄弟控件的值变化，也不会因为兄弟控件更新就自动重跑。
• 你的自定义校验器挂载在untilDate控件上，但校验逻辑依赖的是兄弟控件isRangeDate的值：
  1. 初始状态isRangeDate为false时，untilDate首次执行校验返回null，无错误；
  2. 第一次切换isRangeDate为true时，受首次渲染、全局校验触发等逻辑影响，untilDate的校验器被执行，返回required错误附着在控件上；
  3. 后续再切换isRangeDate回false时，因为untilDate自身的值没有任何变化，Angular不会重新执行它身上挂载的校验器，所以控制台看不到校验函数的打印，之前残留的required错误也不会被清除，最终出现校验状态不更新的问题。
• 额外注意：在子控件校验器里通过control.parent直接拿兄弟控件值的写法本身存在隐式依赖问题，脱离当前FormGroup结构复用这个校验器时会直接报错。

你可以根据项目场景选以下三种实现方式：

方案1：将跨字段校验器提升到FormGroup层级（官方推荐） #

跨字段校验的标准实现方式是把校验逻辑挂载到共同的父FormGroup上，这样组内任意控件值变化都会触发校验器，不会出现漏触发问题，也不需要手动维护订阅。
首先调整FormGroup初始化代码，把校验器挂到组级：

this.complaint = new FormGroup({
  date: new FormControl(null, Validators.required),
  isRangeDate: new FormControl(false, Validators.required),
  untilDate: new FormControl(null),
}, { validators: rangeDateValidator() });

然后修改自定义校验器逻辑，直接操作组内的控件设置错误：

function rangeDateValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const isRangeDate = control.get('isRangeDate')?.value;
    const untilDateControl = control.get('untilDate');
    if (!untilDateControl) return null;

    if (isRangeDate && !untilDateControl.value) {
      // 给untilDate追加required错误，不覆盖其他校验器生成的错误
      untilDateControl.setErrors({
        ...untilDateControl.errors,
        required: true
      });
    } else {
      // 清除当前校验器生成的required错误，保留其他错误
      const errors = untilDateControl.errors;
      if (errors?.required) {
        delete errors.required;
        untilDateControl.setErrors(Object.keys(errors).length ? errors : null);
      }
    }
    return null;
  };
}

方案2：监听依赖控件变化，手动触发目标控件校验 #

如果不想调整现有校验器的挂载位置，可以订阅isRangeDate的值变化，每次变更时手动触发untilDate的校验重跑，改动量最小：

// 组件类中添加取消订阅的载体
private destroy$ = new Subject<void>();

ngOnInit() {
  this.complaint.get('isRangeDate')?.valueChanges
    .pipe(takeUntil(this.destroy$))
    .subscribe(() => {
      this.complaint.get('untilDate')?.updateValueAndValidity();
    });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

注意：一定要在组件销毁时取消订阅，避免内存泄漏。

方案3：动态添加/移除内置required校验器 #

如果逻辑只是简单的条件必填，甚至不需要写自定义校验器，直接根据isRangeDate的状态动态给untilDate增减内置的Validators.required即可：

private destroy$ = new Subject<void>();

ngOnInit() {
  this.complaint.get('isRangeDate')?.valueChanges
    .pipe(takeUntil(this.destroy$))
    .subscribe((isRange: boolean) => {
      const untilDateControl = this.complaint.get('untilDate');
      if (!untilDateControl) return;

      if (isRange) {
        untilDateControl.addValidators(Validators.required);
      } else {
        untilDateControl.removeValidators(Validators.required);
      }
      // 增减校验器后必须手动调用刷新，否则变更不生效
      untilDateControl.updateValueAndValidity();
    });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

通用注意点：所有手动修改控件校验规则、依赖跨控件值更新校验状态的场景，操作完成后都要调用updateValueAndValidity()才能让状态变更生效。

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