Доступ к группе управления формой внутри * ngFor - PullRequest
Новая
       58

Доступ к группе управления формой внутри * ngFor

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

В файле шаблона я перебираю массив элементов, и для каждого элемента вставляется отдельная строка.

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

Надеюсь, я объяснил это ясно. Ниже код моего шаблона: 

<tr *ngFor="let element of elements">
  <td>
      <input matInput
             formControlName="elementNamePrefix"
             [required]="controls.elementNamePrefix.required"
             [placeholder]="controls.elementNamePrefix.displayName"
             [type]="controls.elementNamePrefix.type">
      <mat-error *ngIf="group.get('elementNamePrefix').hasError('maxlength')">
        Max length is XY characters!
      </mat-error>
  </td>
</tr>

Ответы [ 2 ]

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

Я думаю, что проблема связана с тем, как вы объявляете ввод. Вы используете один и тот же formControlName для всех них. Вместо этого попробуйте назначить динамику c one: 

<tr *ngFor="let part of parts; index as i">
  <td>
    <input matInput
         formControlName="{{part.whatever}}"
         [required]="controls.partNamePrefix.required"
         [placeholder]="controls.partNamePrefix.displayName"
         [type]="controls.partNamePrefix.type">
    <mat-error *ngIf="group.get({{part.whatever}}).hasError('maxlength')">
      Max length is XY characters!
    </mat-error>
  </td>
</tr>
0 голосов
/ 12 февраля 2020

Согласно моему пониманию parts это formArray. Следовательно, вы должны найти форму formGroup на основе этого индекса, чтобы отобразить сообщение об ошибке в этом конкретном элементе управления.

Попробуйте это условие в <mat-error> контейнере. 

<tr *ngFor="let part of parts; let i=index">
  <td>
      <input matInput
             formControlName="partNamePrefix"
             [required]="controls.partNamePrefix.required"
             [placeholder]="controls.partNamePrefix.displayName"
             [type]="controls.partNamePrefix.type">
    <mat-error *ngIf="getFormGroup(i).get('partNamePrefix').hasError('maxlength')">
        Max length is XY characters!
    </mat-error>
  </td>
</tr>

TS : 

getFormGroup(index: number) {
  return (this.parts.controls.find((_controls, groupIndex) => (groupIndex === index)) as FormGroup)
}
...