Angular模板驱动表单markAsUntouched无法清除校验红色下划线问题

问题现象 #

开发Angular模板驱动表单时，配置基于条件的必填字段校验，使用了错误的属性绑定写法：

([required]="test.test1")

配置完成后文本域持续出现红色校验下划线，尝试调用setErrors(null)、读取valid/untouched状态等方式均无法消除红色提示。

问题根因 #

• 绑定语法错误：([xxx])是双向绑定的语法结构，required校验指令只需要单向属性绑定，错误写法会导致Angular无法正确响应条件变化，校验状态残留。
• 校验状态未触发更新：语法错误导致的错误状态不会因为手动调用setErrors自动清除，需要重新执行控件的有效性校验。
• 部分开发者自定义的错误样式没有加状态判断，只要控件带ng-invalid类就显示红框，和用户交互状态脱钩。

修复步骤 #

• 修正条件必填的绑定语法，删除多余的圆括号，使用标准单向属性绑定，同时确保绑定值返回明确布尔值：

<!-- 错误写法 -->
<textarea ([required]="test.test1"></textarea>

<!-- 正确写法 -->
<textarea [required]="!!test.test1"></textarea>

• 给对应文本域添加模板引用，获取控件实例后手动重置校验状态，触发有效性更新：
  首先给模板里的文本域加引用标记：

  <textarea
    [required]="!!test.test1"
    name="testField"
    ngModel
    #testField="ngModel"
  ></textarea>
  

  然后在组件逻辑里执行状态重置：

  import { ViewChild } from '@angular/core';
  import { NgModel } from '@angular/forms';
  
  @ViewChild('testField') testFieldRef!: NgModel;
  
  // 绑定逻辑变更后，在变更检测完成后执行更新
  resetFieldValidateStatus() {
    setTimeout(() => {
      const control = this.testFieldRef.control;
      control.markAsPristine();
      control.markAsUntouched();
      control.updateValueAndValidity({
        onlySelf: true,
        emitEvent: false
      });
    }, 0);
  }
  

• 修正表单错误样式的触发逻辑，避免未触碰控件就显示错误提示：

/* 移除常驻的无效样式，仅在控件被触碰或表单提交后显示错误样式 */
textarea.ng-invalid.ng-touched,
form.ng-submitted textarea.ng-invalid {
  border-bottom: 2px solid #f44336;
}

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