Angular Dynami c Добавление полей

Question

Пытаюсь добавить поля динамически, но постоянно получаю эту ошибку. Может кто-нибудь указать мне, что вызывает это. Ссылка на stackblitz ниже.

Щелкните Search ABC, и искомый элемент будет добавлен в форму ниже. Этот искомый элемент ABC должен быть отображен в поле.

ERROR Error: Cannot find control with path: 'items -> field2'
    at _throwError (shared.ts:140)
    at setUpControl (shared.ts:36)
    at FormGroupDirective.addControl (form_group_directive.ts:132)
    at FormControlName._setUpControl (form_control_name.ts:285)
    at FormControlName.ngOnChanges (form_control_name.ts:212)
    at checkAndUpdateDirectiveInline (provider.ts:207)
    at checkAndUpdateNodeInline (view.ts:429)
    at checkAndUpdateNode (view.ts:389)
    at debugCheckAndUpdateNode (services.ts:430)
    at debugCheckDirectivesFn (services.ts:391)

https://stackblitz.com/edit/angular-t36ees?file=src%2Fapp%2Fhello.component.ts

Answer 1

вы собираетесь сделать это в шаблоне:

<tbody formArrayName="items">
     <tr *ngFor="let item of items.controls; let i = index;" [formGroupName]="i">
          <td>{{ i + 1 }}</td>
          <td><input formControlName="field1" /></td>
          <td><input formControlName="field2" /></td>
          <td><input formControlName="field3" /></td>
     </tr>
</tbody>

вы не хотите повторять директиву имени массива формы для каждой строки, поэтому просто приклейте ее к телу таблицы один раз, и вы необходимо сообщить angular, к какому индексу в массиве он обращается, вы делаете это с помощью директивы имени группы форм с индексом в качестве имени. это правильно строит путь items -> 0 -> field2, тогда как items -> field2 является недопустимым путем, поскольку он не говорит, какой элемент в массиве, а items не имеет свойства field2, это массив групп, у которых есть свойство .

фиксированный блиц: https://stackblitz.com/edit/angular-3sgqqx?file=src / app / hello.component.ts