Каков наилучший способ обработки сообщений об ошибках реагирующей формы Angular? - PullRequest
Новая
       1

Каков наилучший способ обработки сообщений об ошибках реагирующей формы Angular?

0 голосов
/ 10 февраля 2020

В нашем проекте мы используем Angular материальные формы. Приходя к проверке 

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Email</mat-label>
    <input matInput [formControl]="emailFormControl" 
           placeholder="Ex. pat@example.com">
    <mat-hint>Errors appear instantly!</mat-hint>
    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
      Please enter a valid email address
    </mat-error>
    <mat-error *ngIf="emailFormControl.hasError('required')">
      Email is <strong>required</strong>
    </mat-error>
  </mat-form-field>
</form>

Angular компонент материала, по умолчанию, самопроверка того, что поле затронуто / передано состояния проверки. и применение недопустимого красного цвета к полю и сообщению об ошибке. Не нужно ничего делать.

Как правило, документация предлагает вышеуказанный подход. Но вместо сообщения об ошибке wirte непосредственно в html и для уменьшения количества строк мы передаем эту услугу, как эта. Но это не лучшая практика, когда вызов функции или службы напрямую из html. 

<mat-form-field class="example-full-width">
    <mat-label>Email</mat-label>
    <input matInput formControlName="emailFormControl" 
           placeholder="Ex. pat@example.com">

    <mat-error>
      <span [innerHTML]="commonService.getErrorMessages('emailFormControl',exampleForm )"></span>
        <br>
        <span [innerHTML]="getErrorMessages('emailFormControl',exampleForm )"></span>

    </mat-error>
  </mat-form-field>

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

Проверьте следующую ссылку для справки Пример материала реактивной формы

Итак, что такое альтернативный и лучший подход?

1 Ответ

0 голосов
/ 10 февраля 2020

mat-error элементы управляются MatFormField, поэтому их не нужно явно показывать / скрывать, если у вас их больше одного. Кроме того, ошибки всегда инициируются каким-либо изменением, так что вы можете подписаться на изменения статуса и значений в объектах формы и устанавливать сообщения об ошибках по мере необходимости, используя только один mat-error. Например: 

<mat-error>{{emailErrorMsg}}</mat-error>
...
emailErrorMsg: string = '';
...

ngOnInit() {
  ...
  this.exampleForm.statusChanges.subscribe(() => this.setErrors());
}

setErrors() {
  if (exampleForm.controls['emailFormControl'].hasError('required')) {
    this.emailErrorMsg = "Email is required";
  }
  else if (exampleForm.controls['emailFormControl'].hasError('email')) {
    this.emailErrorMsg = "Please enter a valid email address";
  }
};

Это работает хорошо, за исключением «обязательного», которое может быть запущено без какого-либо изменения значения или состояния. В этих случаях на входах может использоваться blur слушатель: 

<input (blur)="setErrors()">
...