提交时进行角度材料验证

Question

我使用的是Angular Material输入字段，但有一个问题是，一旦用户对它做了什么，字段就会变成红色。

但是，在提交表单之前，我需要这些字段保持"有效"，这样用户只有在单击提交按钮后才能开始看到错误。

在随意输入中，我使用了<input [class.ng-invalid]="control.invalid && submitted">，因此它在单击"提交"后开始变红。

然而，当我试图将其应用于matInput时，这并没有帮助我

<mat-form-field class="w-100">
<input [id]="id" matInput
[class.ng-invalid]="control.errors && submitted"
[placeholder]="getPlaceholder()"
[formControl]="control">
</mat-form-field>

如何实现仅在提交后显示错误？

Answer 1

通过创建自己的ErrorStateMatch解决，如中所述https://material.angular.io/components/input/overview#changing-当错误消息显示时