我想在Angular 5中使用FormArray。
我创建了一个包含 table 2 Id Date USER
12345 2018-02-13 09:41:43 a@gmail.com
的表单列表,我想用ngx-dnd重新组织它们。
这是我的代码:
FormArray
如果用户在拖放后键入textarea,此代码可以正常工作。
如果用户只是拖放,这段代码不起作用,在这种情况下,我的表格是数组" line"与拖放更改顺序之前相同。
我应该如何在FormArray中使用ng-dnd,并且可以在我的Component中使用ng-dnd的回调方法在" drop"之后执行某些操作?
答案 0 :(得分:2)
好的,我有解决方案!
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
问题在于:我们的&#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方法。