title: Angular FormArray Name Not Displaying For Drag & Drop
body: <p>Trying to use cdkDragDrop populated by a FormGroup > FormArray. I can see the number of items in my array (3) is correctly rendered, but i cant display the value in the div, instead [Object Object] is displayed.</p>
  
  <p>Component:</p>
  
  <pre><code>export class CdkDragDropSortingExample {
  
  myForm: FormGroup;  
  
  constructor(private fb: FormBuilder) {
      this.myForm = this.fb.group({
        title: ['title'],
        items: fb.array([
          fb.group({
            name: fb.control('1'),
            note: fb.control('quux')
          }),
          fb.group({
            name: fb.control('2'),
            note: fb.control('bar')
          }),
          fb.group({
            name: fb.control('3'),
            note: fb.control('baz')
          })         
  
        ])
      })
    }
    drop(event: CdkDragDrop&lt;string[]&gt;) {
      moveItemInArray(this.myForm.get('items').controls, event.previousIndex, event.currentIndex);
      moveItemInArray(this.myForm.get('items').value, event.previousIndex, event.currentIndex);
    }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form [formGroup]="myForm"&gt;
      &lt;input formControlName="title" /&gt;
      &lt;div cdkDropList
      class="example-list"
      (cdkDropListDropped)="drop($event)"&gt;
  
          &lt;div [id]="i" class="example-box" *ngFor="let item of myForm.get('items').controls; let i=index;" cdkDrag
              #elem="cdkDrag" (mouseenter)="enter(i)"&gt;
              &lt;span cdkDragHandle&gt;drag {{item}}&lt;/span&gt;            
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      {{ myForm.value | json}}
  &lt;/form&gt;
  </code></pre>
  
  <p>Stackblitz:<a href="https://stackblitz.com/edit/angular-asevei-gf4der?file=app%2Fcdk-drag-drop-sorting-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-asevei-gf4der?file=app%2Fcdk-drag-drop-sorting-example.html</a></p>