title: FormGroup is not working in FormArray
body: <p>I have a person class.</p>
  
  <pre><code>   export class Person {
          public name: Name;
          public childList: Person[];
          public string: gender;
          // Other Attribute
  
          constructor(person?)
          {
              person = person || {};
              this.name = person.name || {};
              this.gender = person.gender || {};
              this.childList = person.childList || [{}];
          }
      }
  </code></pre>
  
  <p>and Name class contains:</p>
  
  <pre><code> export class Name {
      public firstName?: string;
      public lastName?: string;
  
      constructor(name?)
      {
          name = name || {};
          this.firstName = name.firstName || null;
          this.lastName = name.lastName || null;
      }
  }
  </code></pre>
  
  <p>One part of the person component is:</p>
  
  <pre><code>   createChildInfoForm() {
      this.childInfoForm = this.formBuilder.group({
        childList: this.formBuilder.array([]),
      });
    }
  
    insertChildInfoForm() {
      this.setChildren(this.employee.childList);
    }
  
    get childList(): FormArray {
      return this.childInfoForm.get('childList') as FormArray;
    }
  
    setChildren(children: Person[]) {
      const childFGs = children.map(child =&gt; this.formBuilder.group(child));
      const childFormArray = this.formBuilder.array(childFGs);
      this.childInfoForm.setControl('childList', childFormArray);
    }
  
    addChild() {
      this.childList.push(this.formBuilder.group(new Person()));
    }
  
    removeChild(i: number) {
      const control = &lt;FormArray&gt;this.childInfoForm.controls['childList'];
      control.removeAt(i);
    }
  </code></pre>
  
  <p>Now the HTML is: </p>
  
  <pre><code>    &lt;div formArrayName="childList" class="well well-lg"&gt;
        &lt;div *ngFor="let child of childList.controls; let i=index" [formGroupName]="i" &gt;
          &lt;fieldset&gt;
            &lt;legend&gt;Child # {{i + 1}}
              &lt;mat-icon style="font-size: 15px; padding-left: 5px" *ngIf="childInfoForm.controls.childList.controls.length &gt; 1" (click)="removeChild(i)"&gt;cancel&lt;/mat-icon&gt;
            &lt;/legend&gt;
  
            &lt;!-- The repeated child template --&gt;
            &lt;div formGroupName="name"&gt; &lt;!-- Cannot find control with path: 'childList -&gt; 0 -&gt; name -&gt; firstName' --&gt;
              &lt;mat-form-field class="w-100-p" fxFlex="100"&gt;
                &lt;input matInput  formControlName="firstName" placeholder="Child Name"&gt;
              &lt;/mat-form-field&gt;
            &lt;/div&gt;
  
                  &lt;mat-form-field class="w-100-p" fxFlex="100"&gt; &lt;!-- Its Working --&gt;
                    &lt;input matInput  formControlName="gender" placeholder="Child Name"&gt;
                  &lt;/mat-form-field&gt;
  
          &lt;/fieldset&gt;
          &lt;br/&gt;&lt;br/&gt;
          &lt;!-- End of the repeated address template --&gt;
        &lt;/div&gt;
  
        &lt;button mat-raised-button class="save-employee-button mat-white-bg mt-16 mt-sm-0" (click)="addChild()"&gt;
          &lt;span&gt;Add CHILD&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When I am clicking the 'ADD CHILD Button' a new form is added. But the error is </p>
  
  <blockquote>
    <p>Cannot find control with path: 'childList -> 0 -> name -> firstName'.</p>
  </blockquote>
  
  <p>But for the 'gender' person -> gender is working. I am not sure why formGroupName is not working on Name object.</p>
  
  <p>How to get the name -> firstName from the HTML?</p>
  
  <p>I am a beginner in Angular.</p>