Angular中mat-form-field无校验错误时必填星号仍显示红色问题

问题描述 #

Angular项目开发中出现mat-form-field组件样式异常：组件必填项生成的星号标识，即使在表单无校验错误的状态下也始终显示为红色，预期效果为无校验错误时该必填星号显示为蓝色，经长时间排查未定位问题根因。

问题关联代码 #

<mat-form-field appearance="outline" class="input-field-large input-normal-wide" matInput>
  <mat-label>Name</mat-label>
  <input
    (input)="onNameChange()"
    formControlName="name"
    type="text"
    autocomplete="off"
    matInput
    maxlength="50"
    required="required"
  />
  <mat-icon
    *ngIf="form.hasError('required', 'name') && isNameSubmitted"
    class="mdi mdi-24px mdi-alert-circle"
    matSuffix
  >
  </mat-icon>
  <mat-error *ngIf="form.hasError('required', 'name') && isNameSubmitted">
    <span>{{ "This field is mandatory" | translate }}</span>
  </mat-error>
  <mat-error *ngIf="form.hasError('maxlength', 'name') && isNameSubmitted">
    <span>{{ "Maximum 50 charachers are allowed" | translate }}</span>
  </mat-error>
</mat-form-field>

根因与修复方案 #

• 根因：Angular Material的必填星号由.mat-form-field-required-marker类控制样式，星号始终为红色是因为全局样式或自定义类（代码中用到的input-field-large、input-normal-wide）给该类硬编码了红色属性，且未区分表单正常/错误状态，导致所有状态下星号都渲染为红色。
• 全局生效修复：在项目全局样式文件（默认为styles.scss）中添加如下样式，色值可替换为项目需要的蓝色值：

// 无校验错误状态：必填星号为蓝色
.mat-form-field:not(.mat-form-field-invalid) .mat-form-field-required-marker {
  color: #2563eb;
}

// 校验错误状态：必填星号保持警告红色
.mat-form-field.mat-form-field-invalid .mat-form-field-required-marker {
  color: #ef4444;
}

• 单组件生效修复：如果只需要当前组件内的表单项生效，在对应组件的样式文件中添加样式时，需要用穿透选择器绕过Angular默认的视图样式封装：

:host ::ng-deep .mat-form-field:not(.mat-form-field-invalid) .mat-form-field-required-marker {
  color: #2563eb;
}
:host ::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-required-marker {
  color: #ef4444;
}

• 冲突排查：优先检查input-field-large、input-normal-wide两个自定义类对应的样式代码，删除其中对.mat-form-field-required-marker写死红色的规则，避免和上述修复样式优先级冲突。

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