Angular响应式表单addValidator添加校验不立即生效，仅输入删内容后触发

• 你调用addValidators()、clearValidators()修改校验规则后，Angular 响应式表单不会自动重新计算控件和表单的校验状态，只有当控件值发生变更时才会触发校验重算。这就是你刚开启开关后校验没生效，修改输入框内容后才生效的核心原因。
• 你提交按钮的禁用逻辑也存在错误：当前逻辑只有「表单有效且开启了邮箱提醒」时按钮才可用，未开启邮箱提醒的场景下即便表单填写符合要求，按钮也会处于禁用状态。

1. 每次修改校验规则后，手动调用控件的updateValueAndValidity()方法触发校验状态更新，该方法会重新运行当前控件的校验器，更新控件的errors、valid等状态，同时向上联动更新父表单的整体状态
2. 简化提交按钮的禁用逻辑，直接绑定表单的valid状态即可，你已经通过代码动态调整了邮箱字段的校验规则，表单的valid状态已经包含了邮箱是否必填的判断

修正后的TS代码 #

onCheckboxEmailChange(e) {
  const emailControl = this.reminderForm.get("EmailAddress");
  if (this.emailReminderType === false) {
    this.emailReminderType = true;
    emailControl.addValidators(Validators.required);
  } else {
    this.emailReminderType = false;
    emailControl.clearValidators();
  }
  // 新增：手动触发控件校验状态更新
  emailControl.updateValueAndValidity();
}

修正后的提交按钮代码 #

<button mat-raised-button color="primary" type="submit" [disabled]="!reminderForm.valid">Remind me!</button>

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