title: Angular FormArray: Cannot find control with path
body: <p>I trying to build an Angular Reactive form where an account can add many students. </p>
  
  <p>The form seems to work. When you hit Add Student it creates a new student but you check the console it says </p>
  
  <blockquote>
    <p>ERROR Error: Cannot find control with path: 'studentsArray -> 1 ->
    firstName</p>
  </blockquote>
  
  <p>and so on for each control in the array. </p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="accountForm"&gt;
  &lt;div&gt;
      &lt;input formControlName="firstName" placeholder="First name"&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input formControlName="lastName" placeholder="Last name"&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input formControlName="phone" placeholder="Phone"&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input formControlName="email" placeholder="Email"&gt;
  &lt;/div&gt;
  &lt;button (click)="addStudent()" *ngIf="!showStudentForm"&gt;Add Student&lt;/button&gt;
  &lt;div formArrayName="studentsArray"&gt;
      &lt;div *ngFor="let student of studentsArray.controls; let i = index" [formGroupName]="i"&gt;
          &lt;input formControlName="firstName" placeholder="First Name"&gt;
          &lt;input formControlName="lastName" placeholder="Last Name"&gt;
          &lt;input formControlName="dob" placeholder="Date of Birth"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component, Input, OnChanges } from '@angular/core';
  import { FormGroup, FormControl, Validators, FormArray, FormBuilder } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
   @Input() account: Account;
    accountForm: FormGroup;
  
    constructor(private fb: FormBuilder) {
      this.createForm();
    }
  
     createForm() {
      this.accountForm = this.fb.group({
        'firstName': '',
        'lastName': '',
        'email': '',
        'phone': '',
        'studentsArray': this.fb.array([])
      });
     }
  
     ngOnChanges() {
      this.rebuildForm();
    }
  
    rebuildForm() {
      this.accountForm.reset({
        firstName: this.account.firstName,
        lastName: this.account.lastName,
        email: this.account.email,
        phone: this.account.phone
      });
      this.setStudents(this.account.students);
    }
  
    get studentsArray(): FormArray {
      return this.accountForm.get('studentsArray') as FormArray;
    }
  
    setStudents(students: Student[]) {
      const studentFGs = students.map(student =&gt; this.fb.group(student));
      const studentFormArray = this.fb.array(studentFGs);
      this.accountForm.setControl('studentsArray', studentFormArray);
    }
  
    addStudent() {
      this.studentsArray.push(this.fb.group(new Student()));
    }
  }
  
  export class Account {
    public firstName: '';
    public lastName: '';
    public email: '';
    public phone: '';
    public students: Student[];
  }
  
  export class Student {
    firstName: '';
    lastName: '';
    dob: '';
  }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-rqvv3a" rel="noreferrer">https://stackblitz.com/edit/angular-rqvv3a</a></p>
  
  <p>Any suggestion will be much appreciated. </p>