Angular表单输入控件异常：字段校验非法时仍被错误添加valid类

问题本质是你使用的前端UI库（大概率为Materialize CSS）自带的表单校验逻辑和Angular响应式表单的校验逻辑发生了冲突：

• 你给input添加的validate类是Materialize CSS的专属校验类，该库会自动监听input的输入、失焦事件，基于原生HTML5校验规则自行给元素添加/移除valid/invalid类，该操作完全不受Angular表单状态控制
• 你手动绑定的[ngClass]优先级低于UI库的直接DOM操作，因此失焦后UI库的逻辑执行会覆盖你绑定的类状态，导致自定义类失效

根据你的业务需求可以选择以下任意一种方案：

1. 直接移除input上的validate类，放弃UI库的自动校验逻辑
   如果不需要依赖UI库的校验样式，直接删掉class="validate"中的validate即可，后续完全基于Angular自动生成的ng-valid/ng-invalid/ng-touched等状态类写校验样式，从根源避免冲突。

2. 全局禁用UI库的表单自动校验能力
   如果要保留其他Materialize组件能力，只关闭自动校验，在全局初始化代码中添加如下配置即可：

// 如果使用自动初始化
M.AutoInit();
M.FormSelect.defaults.validate = false;

3. 绑定Angular表单状态同步覆盖UI库的类状态
   如果必须保留UI库的valid/invalid类相关样式，可以监听表单控件的状态变更事件，主动同步类状态：

this.myForm.controls.fieldName.statusChanges.subscribe(status => {
  const inputEl = document.getElementById('fieldName');
  const isTouched = this.myForm.controls.fieldName.touched;
  if (status === 'INVALID' && isTouched) {
    inputEl.classList.remove('valid');
    inputEl.classList.add('invalid');
  } else if (status === 'VALID' && isTouched) {
    inputEl.classList.remove('invalid');
    inputEl.classList.add('valid');
  }
});

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