title: Angular2 Nested formGroups - formArrays and template Binding
body: <p>Here is the problem:</p>
  
  <p>I have a complex form with nested formgroups, here is a "simplified" structure of what it looks like : </p>
  
  <pre><code>-&gt; MyForm (formGroup)
      -&gt; Whatever01 (formControl - input)
      -&gt; Whatever02 (formControl - input)
      -&gt; WhateverGroup01 (formGroup)
          -&gt; Whatever03 (formControl - input)
          -&gt; Whatever04 (formControl - input)
      -&gt; WhateverArray01 (formArray)
          -&gt; WhateverGroup02 (formGroup)
              -&gt; Whatever05 (formControl - input)
              -&gt; WhateverGroup03 (formGroup)
                  -&gt; Whatever06 (formControl - input)
          -&gt; WhateverGroup04 (formGroup)
              -&gt; Whatever07 (formControl - input)
      -&gt; ...
  </code></pre>
  
  <p>Angular side, it should look somehow like this (not correct/complete, but just to give an idea) : </p>
  
  <pre><code>this.myForm = this.fb.group({
      whatever01: ['',Validators.compose([...])],
      whatever02: ['',Validators.compose([...])],
      whateverGroup01: this._formBuilder.group({
          whatever03: ['',Validators.compose([...])],
          whatever04: ['',Validators.compose([...])]
      }),
      whateverArray01: this._formBuilder.array([
          this._formBuilder.group({
              whatever05: ['',Validators.compose([...])],
              whateverGroup03: this._formBuilder.group({
                  whatever06: ['',Validators.compose([...])]
              })
          }),
          this._formBuilder.group({
              whatever07: ['',Validators.compose([...])],
          })
      ])
      ...
  });
  </code></pre>
  
  <p>Things go pretty fine from root myForm item to fetching the formArray, but then come the troubles....</p>
  
  <p>So, I just can't access "whatever05" (and 06 but 05 does NOT work... so...) formControl to bind it to the template ! Here is what the template actually looks like (intentionnaly skipped the part before the array), the interesting part is the [????]="????", this is the problem actually.  </p>
  
  <pre><code>&lt;form [formGroup]="myForm" ...&gt;
      &lt;!-- ...skipped... --&gt;
      &lt;div formArrayName="whateverArray01" *ngFor="let item of myForm.controls.whateverGroup01.controls.whateverArray01.controls;let idx = index;" [formGroupName]="idx"&gt;
          &lt;div [????]="????"&gt;
              &lt;input formControlName="whatever05" ... /&gt;
              &lt;div [????]="????"&gt;
                  &lt;input formControlName="whatever06" ... /&gt;
              &lt;/div&gt;
          &lt;/div&gt;    
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The formGroups located in the formArray have all the same structure. </p>
  
  <p>Basically, the problem is that I canNOT access the formControls within the formGroups... </p>
  
  <p>I tried several solutions, I used [formGroupName] , formGroupName (without brackets), [formGroup], formControlName, ... But cannot figure out what I have to use to be able to bind the corresponding formGroup/formControl with the data ! </p>
  
  <p>I come to this kind of errors by now : </p>
  
  <pre><code>formGroup expects a FormGroup instance. Please pass one in. 
  // This when using [formGroup]="item.whateverGroup02"
  
  Cannot find control with name: 'whatever05'
  // When using [formGroup]="item.controls.whateverGroup02"
  
  Cannot find control with path: 'whateverArray01 -&gt; 0 -&gt;'
  // This when using [formGroupName]="whateverGroup02"
  </code></pre>
  
  <p>Thanks for reading / help</p>
  
  <p>Here is a plunker with some code : </p>
  
  <p><a href="http://plnkr.co/edit/wf7fcHMkhIwzmLWLnCF8?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/wf7fcHMkhIwzmLWLnCF8?p=preview</a></p>