Angular Material垂直步进器，带有cdkDropList问题，带有表单输入名称

Question

我正在使用角度材料做一个下拉列表，我有以下问题：

最初：qazxsw poi

我正在使用ngForm的索引作为表单属性名称的值，如果我在末尾更改空元素的位置（用鼠标移动）然后删除它我得到：

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

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

有什么方法可以解决这个问题？

Answer 1

如果你在你的drop方法中https://stackblitz.com/edit/angular-hipzr9你的console.log和你的event.container.data，你会看到它们在你拖放到列表后都匹配。

this.form.contactFormSections

你的逻辑被“解耦”的地方是因为你在你的html

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

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

中使用模板驱动的表单...这是一个与组件“分离”的孤立形式

你需要利用#formBuild="ngForm"来解决这个问题。根据您的部分构建reactive forms并操作表单组，这将使您的底层数组与视图“耦合”并使所有内容保持同步。

FormGroup

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

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