如何使用 ngx-dnd 在 FormArray 中拖放？答案

【问题标题】：How do I use drag and drop in FormArray with ngx-dnd?如何使用 ngx-dnd 在 FormArray 中拖放？
【发布时间】：2018-02-13 14:52:46
【问题描述】：

我想在 Angular 5 中使用 FormArray。

我用FormArray 创建了一个表单列表，我想用ngx-dnd 重新组织它们。

这是我的代码：

<div class="ngx-dnd-container" ngxDroppable [model]="formData.controls">
     <div class="ngx-dnd-item" ngxDraggable [model]="line" formArrayName="lines" *ngFor="let line of formData.controls; let i = index;">
         <div [formGroupName]="i"> 
            <textarea formControlName="linedescription"></textarea>
        </div>
    </div>
</div>

如果用户在拖放后键入 textarea，则此代码可以正常工作。

如果用户只是拖放，则此代码不起作用，在这种情况下，我的表单数组“行”与拖放更改顺序之前相同。

我应该如何将 ng-dnd 与 FormArray 一起使用，我是否可以在我的组件中使用 ng-dnd 的回调方法在“drop”之后执行某些操作？

【问题讨论】：

提供一个工作示例（plunkr 或其他）可能会对您有所帮助
Ok @MathieudeLorimier : Voici le Lien de l'app ou tu peux reproduire ce que je décris à savoir : - Le changement n'est pas pris en compte lors du "drop" (les lines ne se réorganisent pas dans l'Array lines - Le changement fonctionne après un drop SI le user type dans un textarea -> L'app : angular-xqhjug.stackblitz.io -> Dans l'éditeur : stackblitz.com/edit/angular-xqhjug

标签： angular drag-and-drop formarray

【解决方案1】：

好的，我有解决办法！

1 - ngx-dnd 事件

ngx-dnd 库允许我们使用许多事件：drop()、drag()、over()、out()、remove()、cancel()。 (Source)

因此，如果项目被“丢弃”，您可以在组件中调用自己的方法。例如：

form.component.html

<div (drop)="dropped($event)" 
     class="ngx-dnd-container" 
     ngxDroppable 
     [model]="formData.controls">
//...

form.component.ts

dropped(event) {
    alert('Ok drop is Done !')
}

2 - 更新 FormArray

问题出在这里：我们的“放置动作”没有重新排序 FormArray。

Angular 的FormArray class 公开了许多解决此问题的方法。我选择了reset() 方法，因为我们可以将值作为参数传递并更新整个FormArray。

reset(value?: any, options?: Object)

最后，在你的 form.component.ts 中更新你的方法

dropped(event) {
    let linesCopy = [];
    this.lines = this.form.get('lines') as FormArray;
    for(let line of this.lines.controls) {
        linesCopy.push(line.value);
    }
    this.lines.reset(linesCopy);
}

现在可以正常工作了，你可以在Stackblitz看到一个完整的工作示例和源代码。

PS：在 Angular 中操作表单时，请注意仅使用表单类方法。不要使用 JavaScript 方法来推送、删除、设置值等。仅使用 FormArray class 方法。

【讨论】：