带有（反应式）表单的 Angular CDK 拖放

Question

我有这个例子：https : //stackblitz.com/edit/angular-asevei?file=app%2Fcdk-drag-drop-sorting-example.html

一切正常，但是在 将选择框“重置”到列表中的第一个值时。

有没有什么办法解决这一问题？它只是视觉上的，但对用户来说非常刺耳。我曾尝试使用该cdkDragPreview选项，但无法使其正常工作。

成分：

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<string[]>) {
    moveItemInArray(this.myForm.get('items').controls, event.previousIndex, event.currentIndex);
    moveItemInArray(this.myForm.get('items').value, event.previousIndex, event.currentIndex);
    }
}

模板：

<form [formGroup]="myForm">
    <input formControlName="title" />
    <div cdkDropList id="foo" class="example-list" (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of myForm.get('items').controls" cdkDrag>
            <span cdkDragHandle>drag</span>
            <div [formGroup]="item">
                <input type="text" formControlName="name">
                <select formControlName="note">
                    <option>foo</option>
                    <option>bar</option>
                    <option>baz</option>
                    <option>quux</option>
                </select>
            </div>
        </div>
    </div>
    {{ myForm.value | json }}
</form>

Answer 1

我修改了@Amir Fawzy 的答案，添加了一个变量来获取当前活动笔记，该笔记在拖动所选框时显示。

TS：

activeNote: string;
enter(i) {
  this.activeNote = this.myForm.get('items')['controls'][i].get('note').value;
}

HTML：

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div [id]="i" class="example-box" *ngFor="let item of myForm.get('items').controls; let i=index;" cdkDrag #elem="cdkDrag" (mouseenter)="enter(i)">
    <span cdkDragHandle>drag</span>
    <div [formGroup]="item">
      <input type="text" formControlName="name">
      <select formControlName="note">
        <option [hidden]="elem.moved">{{activeNote}}</option>
        <option>foo</option>
        <option>bar</option>
        <option>baz</option>
        <option>quux</option>
      </select>
    </div>
  </div>
</div>

这是 Stackblitz 上的副本..