Angular条件验证器失效：勾选复选框后未触发输入框验证

问题根源 #

你的代码里，调用updateValueAndValidity()时未指定合理参数，且自定义验证器依赖外部变量的方式导致验证逻辑无法实时响应复选框状态变化，最终勾选复选框后输入框的必填验证未立即触发。

修复步骤 #

1. 优化自定义验证器逻辑 #

将验证器改为通过表单控件关联触发控件，避免依赖外部函数，让逻辑更内聚：

private myFormValidator(triggerControlName: string, validator: ValidatorFn): ValidatorFn {
  return (formControl: FormControl) => {
    if (!formControl.parent) return null;
    
    const triggerControl = formControl.parent.get(triggerControlName);
    if (!triggerControl) return null;

    // 仅当触发控件（复选框）勾选时，应用目标验证规则
    return triggerControl.value ? validator(formControl) : null;
  };
}

2. 重构表单初始化代码 #

直接通过控件名称关联触发控件，消除外部函数依赖：

this.partnerInvoiceDetailsForm = this.fb.group({
  rebates: this.fb.group({
    territories: this.fb.group({
      rebateTier: new FormControl(null, [
        // 指定触发控件为同一FormGroup下的'rebateActive'
        this.myFormValidator('rebateActive', Validators.required)
      ]),
      rebateValue: new FormControl(null),
      rebateActive: new FormControl(null)
    })
  })
});

3. 修正updateValueAndValidity调用 #

添加参数避免循环触发事件，确保验证逻辑强制更新：

this.partnerInvoiceDetailsForm.get('rebates.territories.rebateActive')
  .valueChanges
  .subscribe(() => {
    const rebateTierControl = this.partnerInvoiceDetailsForm.get('rebates.territories.rebateTier');
    rebateTierControl.updateValueAndValidity({ 
      emitEvent: false, 
      onlySelf: true 
    });
  });

原代码失效原因 #

• 自定义验证器依赖外部函数this.rebateActive(this.rebateIdMap[1]).value，该引用无法实时同步复选框最新状态
• updateValueAndValidity()默认会触发valueChanges事件，可能引发不必要的循环，未指定参数时验证逻辑更新不彻底
• 验证器内父控件的判断逻辑存在疏漏，导致验证规则未正确绑定到目标控件

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