Patching Angular Reactive Forms with FormArray of FormGroups

Question

I'm building a form similar to this:

private _buildForm(): FormGroup {
const _form = new FormGroup({
  title: new FormControl('', [Validators.required]),
  jobs: new FormArray([
    new FormGroup({
      _id: new FormControl(''),
      status: new FormControl('')
      });
    ])
  });
}

When I want to patch the form using the patchValue() method (for example, when the data comes back from the server), the jobs array is only patched for one element. In other words, if the jobs array contains more than one job, only the first job FormGroup is patched. I thought Angular would be smart enough to dynamically add as many FormGroups as required to match. How else can the job FormGroups be patched?

You can dynamically add as many FormGroup instances to the FormArray as you like, but in the above code there is only one. You need to add the logic to add controls to a FormArray. — Will Alexander
– Will Alexander, Commented Sep 8, 2019 at 12:17
As Will Alexander say, you can use pathValue, the problem is that you need that the formArray has the same length than the data before make the pathValue — Eliseo
– Eliseo, Commented Sep 9, 2019 at 6:53

Md Rafee · Accepted Answer · 2019-09-08 13:22:00Z

2

No, you can't patch formArray this way. what you can do pass the formArray value as parameter and insert it in the form one by one.

setUpForm(job: Job) {
  return new FormGroup({
    title: new FormControl(job.title), 
    statuses: new FormArray(job.statuses.map((status) => this.createStatus(status))) 
  });
}
createStatus(statuses: any) {
  return new FormGroup({
    id: new FormControl(statuses.id || ''),
    status: new FormControl(statuses.status || ''),
  })
}

Live Example: Stackblitz

edited Sep 8, 2019 at 13:22

answered Sep 8, 2019 at 12:24

Md Rafee

5,6263 gold badges27 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Patching Angular Reactive Forms with FormArray of FormGroups

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