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

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

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


angular angular-reactive-forms formarray formgroups reactive-forms
person cpranathunga    schedule 16.09.2018    source источник
comment
Ваша основная проблема с созданием новых элементов управления через массив форм? Вы не реализуете это правильно, поэтому я и спрашиваю.   -  person jburtondev    schedule 16.09.2018
comment
Найдите обновленную версию (stackblitz.com/edit/angular -9zezpt? File = app / app.component.ts)   -  person cpranathunga    schedule 16.09.2018
comment
Моя основная проблема заключается в том, как связать эти элементы управления с formArray и получить объект json.   -  person cpranathunga    schedule 16.09.2018
comment
Приносим извинения за задержку, вчера был напряженный день. Добавил ответ. Следуйте этому, и это решит вашу проблему.   -  person jburtondev    schedule 18.09.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

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

person jburtondev    schedule 17.09.2018