Angular FormGroup FormArray - отправляет только один объект в массиве из выпадающего списка

Question

Я пытаюсь создать массив объектов из выпадающих значений:

, поэтому результат выбранных значений из изображения будет [{person: 'John', country: 'USA'}, {person: 'Pablo', country: 'Mexico'}], но форма отправляет только последний объект.

Stackblitz

Answer 1

Проблема в том, что вы создаете только 1 FormGroup:

this.selectForm = this.formBuilder.group({
  persons: this.formBuilder.array([
    this.formBuilder.group({
      'person': '',
      'country': ''
    })
  ])
})

Вы должны выполнить итерацию this.parts для их динамического создания:

const persons = <FormArray>this.selectForm.get('persons');

this.parts.forEach((part) => {

  part.persons.forEach((person) => {
    persons.push(this.formBuilder.group({country: null, name: person.name}));
  })
});

Это дастдва экземпляра FormGroup, каждый из которых имеет свойство country и name.Это более простой способ сделать это, и он не такой грязный, как ваше текущее решение.Вам придется соответственно обновить шаблон.

Answer 2

Возможно, вы дублируете formControls вместо того, чтобы создавать новые внутри цикла ngFor.Добавьте уникальные имена для элементов управления формы для каждой итерации, это должно работать.