Угловая проверка материала при отправке

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-when-error-messages-are-shown