Form array only showing one item

Question

I am using reactive forms with a form builder to populate my form.

I defined my form like this:

public myForm = this.formBuilder.group({
  something: [''],
  people: this.formBuilder.array([this.newPerson()]),
});

The newPerson() function looks like this:

public newPerson(): FormGroup {
  return this.formBuilder.group({
    firstName: [''],
    lastName: [''],
  },);
}

In OnInit() I want to populate this form with some data and here is where I have issues. If I do:

this.getPeople().patchValue([
  { firstName: 'Bla', lastName: 'Bla' },
  { firstName: 'Test', lastName: 'Test' }, 
]);

I only see the Bla Bla in my form but not Test Test. Why is that so?

this.formBuilder.array([this.newPerson()]) => this creates a formArray with single formGroup. You'd have to call this.newPerson() twice to create 2 formgroups, and then patchValue — Kanishk Anand
– Kanishk Anand, Commented Nov 26, 2021 at 8:52

Kanishk Anand · Accepted Answer · 2021-11-26 08:58:07Z

1

this.formBuilder.array([this.newPerson()]) => this creates a formArray with single formGroup. You'd have to call this.newPerson() twice to create 2 formgroups, and then patchValue

public myForm = this.formBuilder.group({
  something: [''],
  people: this.formBuilder.array([this.newPerson(), this.newPerson()]),
});

answered Nov 26, 2021 at 8:58

Kanishk Anand

1,7121 gold badge9 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Form array only showing one item

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related