提交时的角度材料验证

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

如https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown 中所述，通过创建自己的ErrorStateMatch 解决