Angular FormGroup FormArray - submits only one object in array from dropdown

Question

I'm trying to create array of objects from dropdown values:

so the result of selected values from the picture would be [{person: 'John', country: 'USA'}, {person: 'Pablo', country: 'Mexico'}] , but form submits only last object.

Stackblitz

Chrillewoodz · Accepted Answer · 2018-10-01 09:33:24Z

2

Problem is that you're creating only 1 FormGroup:

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

You should be doing an iteration of this.parts to dynamically create them:

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}));
  })
});

This will give you two FormGroup instances, each having a country and a name property. This is a more straight-forward way of doing it and it's not as messy as your current solution. You'll have to update the template accordingly.

answered Oct 1, 2018 at 9:33

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arpit Srivastava · Accepted Answer · 2018-10-01 09:21:06Z

0

You probably are duplicating formControls instead of creating new ones inside the ngFor loop. Add unique names to form controls for every iteration, it should work.

answered Oct 1, 2018 at 9:21

Arpit Srivastava

556 bronze badges

Collectives™ on Stack Overflow

Angular FormGroup FormArray - submits only one object in array from dropdown

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related