angular 反应式 forms - 无效输入的样式字段颜色

Question

我正在使用 ReactiveForms，当输入无效时，我似乎找不到更改表单字段轮廓颜色的方法。

我需要更改此颜色，因为考虑到背景渐变，当前的红色并不是真正的最佳颜色，如您所见：

这是我的模板：

<mat-form-field appearance="outline" hideRequiredMarker>
    <mat-label>{{ matLabel }}</mat-label>
    <input
        #input
        matInput
        type="{{ inputType }}"
        [formControl]="control"
        style="caret-color: white"
        autocomplete="off"
    />
    <mat-error style="color:white" *ngIf="control.invalid">{{ getErrorMessage() }}</mat-error>
    ...
</mat-form-field>

如何更改轮廓颜色？

先感谢您。

Answer 1

使用:host::ng-deep覆盖angular 材质样式

像这样试试

:host ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline-thick, 
:host ::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label, .mat-error {
      color: purple !important;
}