Angular可复用mat-select组件错误类动态添加/移除问题求助

问题根源 #

你当前的类绑定逻辑完全错误：[class.inputColorError]="controler.markAsDirty()"调用了markAsDirty()方法，这个方法会永久性地将控件标记为dirty状态，而非判断错误状态。一旦执行，控件的dirty属性就会一直为true，导致错误样式永远无法移除。

解决方案 #

修改mat-form-field的类绑定条件，改为判断控件是否存在验证错误且已被用户交互过：

<mat-form-field appearance="legacy" [class.inputColorError]="controler.invalid && (controler.touched || controler.dirty)">
  <!-- 其余代码保持不变 -->
</mat-form-field>

逻辑说明 #

• controler.invalid：判断控件当前是否存在验证错误（比如必填项未选、格式错误等）
• controler.touched：判断用户是否点击过控件后离开（触发过blur事件）
• controler.dirty：判断控件的值是否被修改过
  两者结合可以确保只有当控件确实有错误，且用户已经和控件交互过之后，才会显示错误样式，当错误消除（控件变为valid）时，样式类会自动移除。

额外样式优化（可选） #

你的SCSS中.mat-form-field-flex的border-bottom属性缺少具体样式值，修正后更符合错误提示的视觉逻辑：

.inputColorError {
  color: red;

  ::ng-deep {
    .mat-form-field-flex {
      border-bottom: 1px solid red;
    }

    .mat-form-field-label {
      color: red;
    }

    .mat-form-field.mat-focused .mat-form-field-ripple,
    .mat-form-field-ripple {
      background: none;
    }
  }
}

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