是否可以在验证错误时使输入垫表单字段的整个边框填充为红色答案

【问题标题】：Is it possible to make entire border of input mat form field fill red on validation error是否可以在验证错误时使输入垫表单字段的整个边框填充为红色
【发布时间】：2021-07-24 14:35:46
【问题描述】：

在我的表单中，我有自定义的电子邮件字段，我不能使用大纲外观输入字段。

<mat-form-field appearance="fill">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="pat@example.com" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>

验证时如果有错误，如下所示

是否有可能让它看起来像下面突出显示整个输入字段

我可以看到很多轮廓外观表单字段的示例，但不是填充外观。有人可以指导。 TIA

更新：

在 css 下试过了还是没能实现。

.mat-form-field-appearance-fill .mat-form-field-invalid .mat-form-field-flex {
  border: 4px solid red !important ;
}

如果有任何技巧可以实现这一点，将会很有帮助。

【问题讨论】：

标签： css mat-form-field angular-material-8 mat-error

【解决方案1】：

::ng-deep .mat-form-field-invalid .mat-form-field-flex {
  border: 2px solid red !important;
  border-bottom: none;
}

您需要使用::ng-deep 来获得所需的结果。 Demo Link。如果遇到任何问题，请告诉我。

【讨论】：

是的..我在我的组件中使用 ViewEncapsulation:none 并忘记在此处添加特定组件..感谢您的指出。
我们可以在 mat 表单字段上使用 ngClass 应用相同的内容吗？类似 [ngClass]=".mat-form-field-flex : 'onCostBelowAvg' " ?
是的，您绝对可以使用 ngClass 在 mat-form-field 上添加一个类，但无法获得您想要的结果。由于您必须在表单无效时应用css。
如果答案对您有用，请点赞。