Why FormControlName copies value if under different FormGroup in FormArray

Question

So I have a reactive form where I'm using certain FormGroup(Contact with first and last name) and adding those up in an FormArray. However every time I update value in one of the FormControls with obviously same name(firstName, lastName) value gets updated throughout the FormArray FormGroup FormControls. What am I doing wrong?

contact = new FormGroup
  ({
    firstName: new FormControl(),
    lastName: new FormControl()
});

this.form = this.fb.group({
  name: ['', Validators.required],
  contacts: this.fb.array([
    this.contact
  ])
});

I would like to add as many contact FormGroups as needed to FormArray and keep their FormControlNames but have the Form value ultimately populated with unique corresponding values.

bruno haspeslagh bruno haspeslagh · Accepted Answer · 2019-08-05T07:49:58

It seems like you're adding the same formGroup instance to the formArray multiple times. You need to create a new formGroup instance every time you add to the formArray:

export class ContactForm extends FormGroup{ 
        constructor(){
            super({
              firstName: new FormControl(),
              lastName: new FormControl(),
            });
     }
    }

then later:

this.form = this.fb.group({
      name: ['', Validators.required],
      contacts: this.fb.array([
        new ContactForm(),
      ])
    });

Why FormControlName copies value if under different FormGroup in FormArray

1 Answers