Вертикальный шаговый AngularMaterial с проблемой cdkDropList с именами ввода формы

Question

Я делаю DropList с угловым материалом, и у меня есть следующая проблема:

Initialy:

Я использую индекс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

Подробное объяснениео том, как использовать динамические реактивные формы и отправлять значения из них.

Динамическая форма с использованием * ngFor и отправка значений из нее