如何根据formControl状态为mat-form-field设置不同颜色？

问题根源 #

1. 选择器层级错误：你原CSS中把.ng-invalid放在.mat-primary元素上，但Angular的表单状态类（如ng-invalid、ng-touched）实际挂载在<mat-select>元素上，而非外层的mat-form-field。
2. 重复class属性：你的mat-form-field写了两个class属性，浏览器只会识别最后一个，导致me-3样式失效。
3. MDC组件结构变化：Angular 17采用MDC架构的Material组件，元素层级和类名优先级与旧版本有差异，原选择器无法精准命中目标元素。

修复步骤 #

1. 修正HTML中的重复class

将mat-form-field的两个class属性合并：

<mat-form-field class="me-3 filterText" appearance="outline">
    <mat-label [ngClass]="{'mat-label-error': form.get('result')?.invalid && form.get('result')?.touched}">
                {{ 'evaluation_detail.result' | translate }}
    </mat-label>
    <mat-select id="result" formControlName="result" data-testid="result-select">
            <mat-option *ngFor="let res of resultOptions" [value]="res.id">{{res.name | translate }}</mat-option>
    </mat-select>
</mat-form-field>

2. 调整CSS选择器，精准匹配状态

针对mat-select的状态类编写选择器，确保箭头颜色随表单状态切换：

/* 控件未失效（或未触发错误状态）时箭头为红色 */
::ng-deep mat-form-field.mat-primary mat-select:not(.ng-invalid.ng-touched) .mat-mdc-select-arrow {
    color: red !important;
}

/* 控件失效且已触碰时，箭头使用主题主色 */
::ng-deep mat-form-field.mat-primary mat-select.ng-invalid.ng-touched .mat-mdc-select-arrow {
    color: var(--primary-color) !important;
}

补充说明 #

• ::ng-deep在Angular 17中仍可用于穿透组件封装，若你的组件设置了ViewEncapsulation.None，可直接去掉::ng-deep。
• 加上.ng-touched是为了符合常见表单验证逻辑：仅当用户触碰过控件且输入无效时，才显示错误样式。若不需要该逻辑，可移除.ng-touched类。

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