Как связать следующую HTML-разметку, используя привязку реактивной формы Angular 6?

Question

Я работаю над угловой формой, найдите этот рабочий пример .

Мне нужно связать эту форму, чтобы сформировать группу и массив форм, получить модель и отправить базу данных для сохранения изменений. У меня возникает проблема, когда один и тот же тип данных появляется более одного раза, изменения выпадающего списка влияют на оба элемента управления.

Answer 1

Похоже, что вы не реализовали FormArray правильно, в результате вам сначала нужно будет реализовать это правильно.

Под этим я подразумеваю, что вы импортировали класс FormArray в свой компонент, но не используете его в качестве элемента управления в FormGroup с элементами управления в массиве (я предполагаю, что вы хотите использовать элементы push / pop на этом FormArray), что является нормальным вариантом использования.

Недавно я написал статью о том, как это сделать, но есть и документация Angular , если у вас возникнут какие-либо проблемы. Таким образом, в этом порядке вам нужно будет сделать следующее:

1. Реализуйте FormArray и FormGroup в вашей форме;
2. Если вам требуется двусторонняя привязка данных, используйте [(ngModel)], а также привязку Реактивной формы, которая поставляется из коробки.
3. С точки зрения ваших проблем с получением объекта json, это просто; используйте {{ yourForm.value | json }} в вашем шаблоне, который покажет вашу форму в виде структуры данных json. Если есть какие-либо проблемы с данными, вы можете легко увидеть это здесь как метод отладки.

4. FormControl, FormGroup и FormArray будут выводить чистый и действительный объект при реализации.

5. Отправьте ваши данные json в БД.