Question

我想在Angular 5中使用FormArray。

我创建了一个包含table 2 Id Date USER 12345 2018-02-13 09:41:43 a@gmail.com的表单列表，我想用ngx-dnd重新组织它们。

这是我的代码：

FormArray

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

如果用户只是拖放，这段代码不起作用，在这种情况下，我的表格是数组＆＃34; line＆＃34;与拖放更改顺序之前相同。

我应该如何在FormArray中使用ng-dnd，并且可以在我的Component中使用ng-dnd的回调方法在＆＃34; drop＆＃34;之后执行某些操作？

Answer 1

好的，我有解决方案！

1 - ngx-dnd活动

ngx-dnd库允许我们使用许多活动：drop()，drag()，over()，out()，remove()，cancel()。（Source）

因此，如果某个项目被删除，您可以在组件中调用自己的方法＆＃34;。例如：

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

问题在于：我们的＆＃34;放弃行动＆＃34;没有重新订购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方法。

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

1 个答案: