Angular 6 - цикл по ng-шаблону в дочернем компоненте с наличием реактивных форм

Question

У меня есть основной компонент, который содержит дочерний компонент внутри него. Основной компонент выглядит следующим образом:

<div>
  <h1>Example</h1>
  <app-form-repeater [form]="form" [path]="'items'" [add]="customGroup">
      <ng-template #content>
          <input formControlName="image" placeholder="Item name">
      </ng-template>
  </app-form-repeater>
</div>

В этом компоненте у меня есть основная FormGroup с именем "form", внутри здесь у меня есть FormArray, и в этом массиве у меня есть FormGroup с именем "items", внутри этой FormGroup у меня есть FormControl с именем "image".

Теперь я хочу зациклить свой «app-form-repeater» через FormArray и отобразить результаты моего ng-шаблона.

Мой "app-form-repeater" выглядит следующим образом:

<div [formGroup]="form">
  <div formArrayName="items" *ngFor="let item of form.get('items').controls; let i = index;">
    <div [formGroupName]="i">
      <ng-template [ngTemplateOutlet]="content"></ng-template>
    </div>

    <button class="btn btn--red btn--sm btn--round" (click)="removeItem(i)">-</button>
  </div>
</div>

<button class="btn btn--blue" (click)="addItem()">New</button> 

Все работает, я могу создавать новые элементы, и это добавляет новый вход. Но есть одна проблема:

ERROR Error: Cannot find control with name: 'image'

Это связано с тем, что он не использует FormGroup и FormArrayName и FormGroupName из компонента "app-form-repeater".

Есть ли способ решить эту проблему?

Добавлено позже:

1. Похоже, что ng-шаблон использует родительский FormArrayName, но не куда загружается шаблон ...
2. Работает непосредственное размещение ввода в "app-form-repeater" но с ng-шаблоном это не так.

Answer 1

Вы должны определить свой formArray в дочернем компоненте примерно так:

ngOnInit() {
  this.childForm= this.formBuilder.group({
    items: this.formBuilder.array([ this.addFormItem(item ) ])
  });
}
  createItem(item ): FormGroup {
  return this.formBuilder.group({
    image: item.image,
  });
}