title: why do I get an array when adding a Formarray to my nested form
body: <p>I am trying to develop a reactive form quite similar to the angular2 tutorial. It works fine, however when I want to add new Question, I get the following error: </p>
  
  <blockquote>
    <p>EXCEPTION: Error in ./RecommendationDetailsComponent class
    RecommendationDetailsComponent - inline template:45:40 caused by:
    Cannot find control with path: 'questions -> 1 -> id'</p>
  </blockquote>
  
  <p>Removing a question works fine. Does anybody have an idea where I might find a solution. It is not clear to me what is exactly the problem right here. </p>
  
  <p>The model : </p>
  
  <pre><code>export class Recommendation {
    _id?: string;
    recommendation: string;
    questions: Question[];
    }
  }
  
  export class Question {
    id: '';
    question: '';
    date: '';
  }
  </code></pre>
  
  <p>the recommendation-details.component.ts</p>
  
  <pre><code>import { Component, Input, OnChanges } from '@angular/core';
  import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
  
  import { Recommendation, Question } from '../recommendation';
  import { RecommendationService } from '../recommendation.service';
  
  @Component({
    selector: 'recommendation-details',
    templateUrl: './recommendation-details.component.html',
    styleUrls: ['./recommendation-details.component.css'],
    providers: [RecommendationService]
  })
  
  export class RecommendationDetailsComponent implements OnChanges {
    @Input()
    Recommendation: Recommendation;
  
    @Input()
    createHandler: Function;
    @Input()
    updateHandler: Function;
    @Input()
    deleteHandler: Function;
  
    recommendationForm: FormGroup;
  
    constructor (private fb: FormBuilder, private recommendationService: RecommendationService) {this.createForm()}
  
    // creatForm Creert een basisformulier om gegevens te wijzigen
    createForm() {
      this.recommendationForm = this.fb.group({
        recommendation: '',
        topic: '',
        secTopic: '',
        questions: this.fb.array([]),
      })
      console.log('Form created')
    }
  
    // Elke keer dat een andere Recommendation wordt gekozen, verander dan de waarden van het formulier
    ngOnChanges() {
      if (this.Recommendation == null) {
        console.log('waiting...');
      } else {
        this.recommendationForm.reset ({
          recommendation: this.Recommendation.recommendation
        })
        this.setQuestions(this.Recommendation.questions);
      }
    };
  
    get questions(): FormArray {
      return this.recommendationForm.get('questions') as FormArray;
        console.log(this.questions);
    }
  
    setQuestions(questions: Question[]) {
      console.log ('Hallo ' + questions[0].question);
      const questionFGs = questions.map(question =&gt; this.fb.group(question));
      const questionFormArray = this.fb.array(questionFGs);
      this.recommendationForm.setControl('questions', questionFormArray);
    }
  
    addQuestion () {
      console.log(this.questions);
      this.questions.push(this.fb.group(new Question()));
    }
  
    }
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;form [formGroup]="recommendationForm" novalidate&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="center-block"&gt;Recommendation:
        &lt;input class="form-control" formControlName="recommendation"&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  
  &lt;div formArrayName="questions" class="well well-lg"&gt;
      &lt;div *ngFor="let question of questions.controls; let i=index" [formGroupName]="i" &gt;
        &lt;!-- The repeated address template --&gt;
        &lt;h4&gt;Question{{i + 1}}&lt;/h4&gt;
        &lt;div style="margin-left: 1em;"&gt;
          &lt;div class="form-group"&gt;
            &lt;label class="center-block"&gt;ID:
              &lt;input class="form-control" formControlName="id"&gt;
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label class="center-block"&gt;Question:
              &lt;input class="form-control" formControlName="question"&gt;
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label class="center-block"&gt;Date:
              &lt;input class="form-control" formControlName="date"&gt;
            &lt;/label&gt;
          &lt;/div&gt;      
        &lt;/div&gt;
      &lt;button (click)="removeQuestion(i)" type="button"&gt;Remove&lt;/button&gt;
      &lt;/div&gt;
    &lt;button (click)="addQuestion()" type="button"&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;p&gt;recommendationForm value: {{ recommendationForm.value | json}}&lt;/p&gt;
  </code></pre>