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

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 material风格

这样试试

: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;
}

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

angular reactive forms - styling field color on invalid input

html

angular

angular-reactive-forms

angular-forms