带有cdkDropList问题的AngularMaterial垂直步进器，具有表单输入名称

Question

我正在用角形材质做一个dropList，并且遇到以下问题：

初始：

我使用ngForm的索引作为表单属性名称的值，如果我更改了空元素的位置（用鼠标移动），然后将其删除，则得到以下信息：

在视觉上它可以正常工作，但是，如果我们查看ngForm字段的值，则会发现这些值不正确，因为删除元素后名称尚未更新

解决此问题的一种方法是将Math.random放在name属性中，但这似乎不是很好的解决方案

有什么办法解决这个问题？

https://stackblitz.com/edit/angular-hipzr9

Answer 1

如果在放置方法期间console.log event.container.data和this.form.contactFormSections，则在列表中进行拖放后，您将看到它们都匹配。

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);

    console.log(event.container.data);
    console.log(this.form.contactFormSections);
  }

您的逻辑“分离”的地方是因为您在html #formBuild="ngForm"中使用模板驱动的表单...这是一个与组件“分离”的隔离形式

您将需要利用reactive forms来解决此问题。根据您的部分构建FormGroup并操作表单组，这将使您的基础数组与视图保持“耦合”，并使所有内容保持同步。

https://angular.io/guide/reactive-forms

有关如何使用动态反应形式并从中提交值的详细说明。

Dynamic form using *ngFor and submitting values from it