反応性フォームのテンプレートを変更できません

Question

反応性フォームのテンプレートを角度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です。