Доступ к групповому контролю формы внутри *ngFor

Question

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

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

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

<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>

Answer 1

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

<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>

Answer 2

В соответствии с моим пониманием 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)
}