Дисплей угловой материал мат-ошибка в обертке - PullRequest
0 голосов
/ 05 ноября 2018

Как правильно отобразить <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 для каждого ввода?

1 Ответ

0 голосов
/ 05 ноября 2018

Я вижу, что вы используете шаблонный подход, я склоняюсь к использованию Reactive для любых форм, которые не классифицируются как действительно простые.

Используемый метод должен быть обобщенным, передавая поле. Я использовал один вариант использования для ясности

Класс машинописи:

get email() {
   return this.form.get('email');
}

 getEmailError() {
    return this.email.hasError('required') ? 'You must enter an email address' :
    this.email.hasError('email') ? 'Not a valid email' : '';
}

Файл шаблона:

<mat-form-field>
  <input
    type="email"
    matInput
    placeholder="Your Email"
    autocomplete="false"
    formControlName="email">
  <mat-hint>Please enter an email address</mat-hint>
  <mat-error *ngIf="email.invalid">{{getEmailError()}}</mat-error>
</mat-form-field>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...