无法使用被动表单更改模板

Question

我试图在Angular 2中更改被动表单的模板。我创建了一个plunker。您可以通过单击按钮并查看控制台来查看错误。

我的初始模板如下：

this.form = this.formBuilder.array([
      this.formBuilder.group({
        answer:this.formBuilder.array([[''], [''], ['']]),
        type:['group']
      }),
      this.formBuilder.group({
        answer:[''],
        type:['control']
      }),
      this.formBuilder.group({
        answer:this.formBuilder.array([[''], [''], ['']]),
        type:['group']
      })
 ]);

单击按钮后，表单将变为：

this.form = this.formBuilder.array([
  this.formBuilder.group({
    answer:[''],
    type:['control']
  }),
  this.formBuilder.group({
    answer:this.formBuilder.array([[''], [''], ['']]),
    type:['group']
  }),
  this.formBuilder.group({
    answer:[''],
    type:['control']
  })
]);

这是html代码：

<div *ngFor="let item of form.controls; let idx=index" [formGroupName]="idx">
    <div *ngIf='item.controls.type.value == "control"'>
       <div>Input</div>
       <input name="answer" type="text" placeholder="Reponse" formControlName="answer"/>
    </div>
    <div *ngIf='item.controls.type.value == "group"' formGroupName="answer">
       <div>Checkboxes</div>
       <div *ngFor='let ctrl of item.controls.answer.controls; let index=index'>
          <input name="answer" type="checkbox" placeholder="Reponse" [formControlName]="index"/>
       </div>
    </div>
</div>

Answer 1

我不确定该解决方案是否适合您，但您可以创建2个表单，只需使用*ngIf指令在它们之间切换。

以下是plunker的示例。