title: Angular CDK drag drop with (reactive) forms
body: <p>I have this example : <a href="https://stackblitz.com/edit/angular-asevei?file=app%2Fcdk-drag-drop-sorting-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-asevei?file=app%2Fcdk-drag-drop-sorting-example.html</a></p>
  <p>everything works, but <em>while</em> <em>dragging</em> the selectbox 'resets' to the first value in the list.</p>
  <p>is there any way to fix this? It's only visual, but quite jarring for the user. I have tried using the <code>cdkDragPreview</code> option, but couldn't get it to work.</p>
  <p><strong>Component:</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
  import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
  
  @Component({
      selector: 'cdk-drag-drop-sorting-example',
      templateUrl: 'cdk-drag-drop-sorting-example.html',
      styleUrls: ['cdk-drag-drop-sorting-example.css'],
  })
  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><strong>Template:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]=&quot;myForm&quot;&gt;
      &lt;input formControlName=&quot;title&quot; /&gt;
      &lt;div cdkDropList id=&quot;foo&quot; class=&quot;example-list&quot; (cdkDropListDropped)=&quot;drop($event)&quot;&gt;
          &lt;div class=&quot;example-box&quot; *ngFor=&quot;let item of myForm.get('items').controls&quot; cdkDrag&gt;
              &lt;span cdkDragHandle&gt;drag&lt;/span&gt;
              &lt;div [formGroup]=&quot;item&quot;&gt;
                  &lt;input type=&quot;text&quot; formControlName=&quot;name&quot;&gt;
                  &lt;select formControlName=&quot;note&quot;&gt;
                      &lt;option&gt;foo&lt;/option&gt;
                      &lt;option&gt;bar&lt;/option&gt;
                      &lt;option&gt;baz&lt;/option&gt;
                      &lt;option&gt;quux&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      {{ myForm.value | json }}
  &lt;/form&gt;
  </code></pre>