我如何使用NGX-DND使用拖放

Question

我想在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>

如果用户在拖放后键入文本方面，则此代码正常。

如果用户只是拖动和删除，则此代码不起作用，在这种情况下，我的表单数组"行"与拖放和删除之前的订单相同。

我应该如何将ng-dnd与formArray一起使用，我可以在组件中使用回调方法对ng-dnd使用" drop"后执行某些内容？

Answer 1

好吧，我有解决方案！

1- ngx -dnd事件

NGX-DND库允许我们使用许多事件：drop()，drag()，over()，out()，remove()，cancel()。(来源(

因此，如果项目"删除"，则可以在组件中调用自己的方法。例如：

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类公开了许多解决此问题的方法。我选择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：当您用角度操纵表单时，请小心只使用类方法。不要使用JavaScript方法推，删除，设置值等。仅使用FormArray类方法。