Как правильно отобразить <mat-error>
в контейнере без нарушения макета?
Фон таков: я использую множество базовых валидаторов в формах, управляемых шаблонами (required
, minlength
, pattern) and want to display the corresponding error message.
mat-form-field only supports the display of one
mat-error` одновременно, и для Каждое сообщение мне нужно, чтобы отобразить удобочитаемое сообщение об ошибке. Каждый ввод будет выглядеть примерно так:
<mat-form-field>
<input matInput required minlength="4" pattern="…">
<mat-error *ngIf="field?.errors?.required">Field is required</mat-error>
<mat-error *ngIf="field?.errors?.minlength">Must be at least {{ field!.errors!.minlength.requiredLength }} characters</mat-error>
<mat-error *ngIf="field?.errors?.pattern">Does not match pattern {{ … }}</mat-error>
</mat-form-field>
Я должен сделать это для каждого поля. Кажется довольно излишним!
Я пробовал несколько подходов для извлечения этого шаблона из шаблона:
- Компонент
*ngFor
<ng-container>
<ng-template>
Однако все они портят компоновку, после чего ошибка отображается в поле ввода. Я предполагаю, что проблема в том, что mat-error
должен быть прямым потомком mat-form-field
, и все мои подходы добавляют дополнительный элемент между mat-error
и mat-form-field
.
Так как я могу обрабатывать ошибки, не записывая все строки mat-error
для каждого ввода?