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>

在此组件中，我有一个名为“ form”的主FormGroup，在这里我有一个FormArray，在此数组中，我有一个名为“ items”的FormGroup，在此FormGroup中有一个名为“ image”的FormControl。

现在，我想通过FormArray循环“ app-form-repeater”并显示ng-template的结果。

我的“ 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'

这是因为它不使用“ app-form-repeater”组件中的FormGroup和FormArrayName和FormGroupName。

是否可以解决此问题？

稍后添加：

看起来ng-template使用父FormArrayName但未使用模板的加载位置...
将输入直接放置在“ app-form-repeater”作品中但是使用ng-template却没有。

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,
  });
}

角度6-具有反应形式的子组件中的ng模板循环

1 个答案: