title: Angular 5 reactive form not binding when using FormArray of FormGroups
body: <p>I have a reusable component for uploading files through a modal using the ng2-file-upload package.  I want it to be flexible in that we will use it in a number of locations, but in each one the the additional form values needed to accompany the upload (like type or name) will be different.  I'm adding the HTML markup for the form in templates.</p>
  
  <p>I get the FormGroup that should be used with each upload through a config passed to the component.  I'm hooking into the ng2-file-upload events to create the FormGroup and add it to a FormArray when an item is added to the upload queue.</p>
  
  <p>All of my ts code appears to be working just fine.  I can see that the FormArray gets FormGroups added as desired, and I can access in the console the value as well as set values and see the validation changing, etc.</p>
  
  <p>However, I can't seem to bind to the view.  Not sure what's going on.  Here are the relevant parts of the view:</p>
  
  <pre><code>  &lt;form [formGroup]="form" novalidate&gt;
      &lt;div class="row"
        formArrayName="uploads"
        *ngFor="let upload of form.get('uploads').controls; let i=index"&gt;
        &lt;div formArrayName="uploads"&gt;
              {{uploader.queue[i]?.file?.name}}
           &lt;div class="row"&gt;
            &lt;div class="col-12"&gt;
              &lt;div [formGroupName]="i"&gt;
                {{form.controls.uploads.controls[i].controls.name.status}}
              &lt;ng-container *ngTemplateOutlet="config.template; context: { i: i }"&gt;&lt;/ng-container&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  
  
  &lt;!-- templates --&gt;
  &lt;ng-template #customerDocument let-item="item" let-i="i"&gt;
       &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;
          &lt;input mdbActive 
            type="text" 
            class="form-control" 
            formControlName="name" 
            placeholder="Document Name" 
            required&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>My form control status prints as expected, but the view doesn't change and anything you type into the view doesn't change the FormGroup.  What am I missing?</p>
  
  <p><strong>Edit</strong> Here's how I'm initiating the form in ngOnInit():</p>
  
  <pre><code>this.form = new FormGroup({
    uploads: new FormArray([])
  });
  </code></pre>
  
  <p>In the add event for the upload queue, I add a copy of the FormGroup that was passed to the component like this, and can even modify the value and it works;</p>
  
  <pre><code>  let uploads = this.form.get('uploads') as FormArray;
    uploads.controls.push(formGroupCopy);
    this.form.get(['uploads', 0, 'name']).setValue('foo');
  </code></pre>