title: FormGroup in FormArray containing object displaying [object Object]
body: <p>I'm working on a prototype for an editor sending data according to a model to an api. 
  Here's the model :</p>
  
  <pre><code>title: string,
  desc: string,
  pairs: [
    {
      left: { label: string },
      right: { label: string }
    },
    ...
  ]
  </code></pre>
  
  <p>The problem here is that I need to work with angular forms and that I can't find a way to display/use left.label and right.label.</p>
  
  <p>For now, my code (shown below) works in typescript, as it's initializing the form with given values (some mock data according to the model). If I log or print my formGroup after it's been given values, it shows exactly as it should.</p>
  
  <p>But my main problem is in the html of my component. Even though my formGroup is formatted well, I can't seem to use label properties (and of course, I want to edit them).</p>
  
  <p>I think it's because when I create a pair in my formArray, I set only left and right properties as formControl in the group.</p>
  
  <p>Here is my <code>component.ts</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class LinksEditorComponent implements OnInit {
    @Input() exercise;
    exerciseForm: FormGroup;
  
    get pairs(): FormArray {
      return this.exerciseForm.get('pairs') as FormArray;
    }
  
    constructor(private formBuilder: FormBuilder) {}
  
    ngOnInit() {
      if (!this.exercise.title || !this.exercise.desc || !this.exercise.pairs) {
        this.exercise = {
          title: '',
          desc: '',
          pairs: []
        };
      }
      this.initExerciseForm();
    }
  
    initExerciseForm() {
      this.exerciseForm = this.formBuilder.group({
        title: [this.exercise.title, Validators.required],
        desc: [this.exercise.desc, Validators.required],
        pairs: this.formBuilder.array(
          this.exercise.pairs.map(pair =&gt; this.createPair(pair)),
          Validators.required
        )
      });
    }
  
    createPair(pair: any): FormGroup {
      return this.formBuilder.group({
        left: [{ label: pair.left.label }, Validators.required],
        right: [{ label: pair.right.label }, Validators.required]
      });
    }
  
    onAddPair() {
      this.pairs.push(
        this.formBuilder.group({
          left: [{ label: '' }, Validators.required],
          right: [{ label: '' }, Validators.required]
        })
      );
    }
  }
  </code></pre>
  
  <p>And here is my <code>component.html</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-card class="links-editor" *ngIf="exercise"&gt;
    &lt;form
      fxLayout="column"
      fxLayoutAlign="space-between center"
      [formGroup]="exerciseForm"
      (ngSubmit)="onSubmit()"
      fxLayout="column"
    &gt;
      &lt;mat-form-field appearance="standard"&gt;
        &lt;mat-label&gt;Title&lt;/mat-label&gt;
        &lt;input matInput formControlName="title" /&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field appearance="standard"&gt;
        &lt;mat-label&gt;Description&lt;/mat-label&gt;
        &lt;input matInput formControlName="desc" /&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-list formArrayName="pairs"&gt;
        &lt;div *ngFor="let pairControl of pairs.controls; let i = index"&gt;
          &lt;div [formGroupName]="i"&gt;
            &lt;mat-form-field appearance="standard"&gt;
              &lt;mat-label&gt;Left chip&lt;/mat-label&gt;
              &lt;input matInput formControlName="left" /&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field appearance="standard"&gt;
              &lt;mat-label&gt;Right chip&lt;/mat-label&gt;
              &lt;input matInput formControlName="right" /&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;button type="button" mat-mini-fab color="accent" (click)="onAddPair()"&gt;
          &lt;mat-icon&gt;add&lt;/mat-icon&gt;
        &lt;/button&gt;
      &lt;/mat-list&gt;
      &lt;button type="submit" mat-fab color="accent" [disabled]="exerciseForm.invalid"&gt;
        &lt;mat-icon&gt;done&lt;/mat-icon&gt;
      &lt;/button&gt;
    &lt;/form&gt;
  &lt;/mat-card&gt;
  
  </code></pre>
  
  <p>If I try in the HTML file to set <code>&lt;input formControlName="left.input"&gt;</code>, I've got an error in the console, and the data isn't displaying. And of course, if I set <code>&lt;input formControlName="left"&gt;</code>, I got... Well left's value : [Object object].</p>