Angular表单验证需两次触发才生效？求助排查

架构老林

2026-8-9

问题分析与解决方案

核心问题

变量名拼写错误：JS代码中订阅的dateoNotRequired是笔误，实际表单控件名为dateNotRequired，这会导致首次点击切换按钮时订阅逻辑无法正确触发。
未完整处理切换逻辑：当前仅在切换开启时清除验证器，但未在切换关闭时恢复必填验证；且首次清除验证器后，updateValueAndValidity()的调用参数未正确更新控件错误状态。

修正后的代码

TS代码

const group = this.fb.group({
  startDate: new FormControl("", [Validators.required]),
  dateNotRequired: new FormControl(false)
});

this.subs.add(
  group.get("dateNotRequired").valueChanges.subscribe((value) => {
    const startDateCtrl = group.get("startDate");
    if (value) {
      // 清除必填验证器
      startDateCtrl.clearValidators();
    } else {
      // 恢复必填验证器
      startDateCtrl.setValidators([Validators.required]);
    }
    // 更新控件状态，仅更新自身且不触发valueChanges避免循环
    startDateCtrl.updateValueAndValidity({ onlySelf: true, emitEvent: false });
  })
);

HTML代码（无需修改）

<mat-error *ngIf="app.form.controls.startDate.touched && app.form.controls.startDate.errors?.required">
  Start date is required
</mat-error>

关键说明

用clearValidators()替代setValidators(null)，更明确地清除所有验证器。
补充切换关闭时的逻辑，恢复Validators.required验证器，保证功能完整性。
调用updateValueAndValidity()时传入{ onlySelf: true, emitEvent: false }：
- onlySelf: true：仅更新当前控件状态，不影响父表单组。
- emitEvent: false：避免触发valueChanges事件，防止订阅逻辑循环执行。
修正变量名拼写错误，确保订阅的是正确的表单控件。