Angular Reactive Forms - * ngFor ошибок, а не несколько операторов "если еще" в HTML - PullRequest
Новая
       31

Angular Reactive Forms - * ngFor ошибок, а не несколько операторов "если еще" в HTML

0 голосов
/ 04 мая 2018

Единственные примеры, которые я могу найти для сообщений об ошибках проверки реактивных форм, - это вывод каждой метки форм и каждого сообщения об ошибке в условном выражении в HTML 

<span *ngIf="form.controls['exampleelement'].hasError('required') && form.controls['exampleelement'].touched" class="login-error">You must include a element.</span>
<span *ngIf="form.controls['exampleelement'].hasError('minlength') && form.controls['exampleelement'].touched" class="login-error">Your element must be at least 20 characters .</span>
<span *ngIf="form.controls['exampleelement'].hasError('maxlength') && form.controls['exampleelement'].touched" class="login-error">Your element cannot exceed 20 characters .</span>

что я хочу понять, это способ собрать эти сообщения об ошибках в массив и выводить их в реальном времени по мере их изменения и т. Д., Вот так 

*ngFor="let error of errors"

1 Ответ

0 голосов
/ 04 мая 2018

Я не думаю, что делать это будет легко для вас. Я реализовал то, что вы просили, посмотрите, поможет ли это вам.

Я добавил эти переменные компонента: 

formControlKeys = [];
errorMessages = {};

В конструкторе: 

// initalized the form and then..

this.formControlKeys = Object.keys(this.subscriptionForm.controls);

this.errorMessages = {
  required: "You must include a element.",
  max: "Max allowed value for input is 10",
  min: "Min allowed value for input is 4"
}

И добавил метод класса: 

getObjectKeys(arg) {
  return Object.keys(arg);
}

И затем в вашем шаблоне: (Есть два цикла, один для цикла по всем элементам управления формы в форме, а другой для цикла по всем ошибкам в каждом элементе управления) 

<ng-container *ngFor="let eachControl of formControlKeys">
    <ng-container *ngIf="subscriptionForm.controls[eachControl].touched">
      <span *ngFor="let eachError of (getObjectKeys(subscriptionForm.controls[eachControl].errors))">
      {{errorMessages[eachError]}}<br>
      </span>
    </ng-container> 
 </ng-container>

См. Рабочий пример здесь .

...