title: Unable to change template with reactive forms
body: <p>I'm trying to change the template of a reactive form in Angular 2. I have created a <a href="https://plnkr.co/edit/dJ1KyDLFDOOa1FUfWu5d?p=preview" rel="nofollow noreferrer">plunker</a>. You can see the error by clicking the button and looking at your console.</p>
  
  <p>My initial template is as follow:</p>
  
  <pre><code>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']
        })
   ]);
  </code></pre>
  
  <p>After clicking the button, the form becomes:</p>
  
  <pre><code>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']
    })
  ]);
  </code></pre>
  
  <p>Here is the html code:</p>
  
  <pre><code>&lt;div *ngFor="let item of form.controls; let idx=index" [formGroupName]="idx"&gt;
      &lt;div *ngIf='item.controls.type.value == "control"'&gt;
         &lt;div&gt;Input&lt;/div&gt;
         &lt;input name="answer" type="text" placeholder="Reponse" formControlName="answer"/&gt;
      &lt;/div&gt;
      &lt;div *ngIf='item.controls.type.value == "group"' formGroupName="answer"&gt;
         &lt;div&gt;Checkboxes&lt;/div&gt;
         &lt;div *ngFor='let ctrl of item.controls.answer.controls; let index=index'&gt;
            &lt;input name="answer" type="checkbox" placeholder="Reponse" [formControlName]="index"/&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>