Angular动态设置FormControl验证器后表单状态未更新问题

需求与问题现象 #

需求：勾选复选框时，为对应的textarea表单控件添加必填验证，表单无效时禁用添加按钮；取消勾选时清除该验证。

实际现象：

• 勾选复选框后，控制台打印表单状态为true，添加按钮未禁用，仅修改该必填字段后，表单验证状态才变化
• 取消勾选后，表单仍处于无效状态

问题原因 #

你的代码里存在两个关键语法错误，导致验证逻辑未正确执行：

• clearValidators是FormControl的方法，需要加括号调用：clearValidators()，你漏了括号，仅引用方法未执行清除操作
• updateValueAndValidity同样是方法，需要加括号调用：updateValueAndValidity()，否则不会触发表单验证状态的重新计算

修复后的TS代码 #

onCheckboxChecked(isChecked): void {
  const noAdditionalInfoReasonsControl = this.addNewRequestFormForIndividual.get('noAdditionalInformationReasons');
  if (isChecked){
      noAdditionalInfoReasonsControl.setValidators(Validators.required);
      this.noAddInfoReasonsErrorMessage = "give reason";
  } else {
      noAdditionalInfoReasonsControl.clearValidators(); // 补全括号执行方法
      this.noAddInfoReasonsErrorMessage = '';
  }
    
  // 补全括号执行方法，可选传入emitEvent参数避免不必要的事件循环
  noAdditionalInfoReasonsControl.updateValueAndValidity({ emitEvent: false });
  console.log(this.addNewRequestFormForIndividual.valid);
}

额外说明 #

• 动态修改验证器后，必须调用updateValueAndValidity()才能让Angular重新计算表单控件的验证状态
• 如果添加按钮的禁用状态绑定了表单的valid属性（如[disabled]="!addNewRequestFormForIndividual.valid"），修复后勾选复选框时，textarea为空会立即让表单变为无效，按钮自动禁用；取消勾选后，验证器被清除，表单状态会恢复正常

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