How to patch form array in typed angular reactive forms

Question

I am trying to figure out how to patch form array in a typed reactive Angular form. patchValue and setValue does not work in my mind consistently with FormControl for example. Here is a form

 this.form = fb.group<IPersonForm>({
      name: new FormControl<string | null>('bob'),
      phones: new FormArray<FormGroup<IPhoneForm>>([]),
    });

I can patch name control easily enough:

this.form.controls.name.patchValue('Jim', { onlySelf: true, emitEvent: false });

But form array is a challenge. Say I create a replacemenmt array

const myPhone = this.fb.group<IPhoneForm>({
      phone: new FormControl<string | null | undefined>('bob')
    });
const array = new FormArray<FormGroup<IPhoneForm>>([myPhone]);

Now if I try to patch (or set), neither compiles:

    //this.form.controls.phones.setValue(array);
    //this.form.controls.phones.setValue(array.controls);
    //this.form.controls.phones.patchValue(array);
    //this.form.controls.phones.patchValue(array.controls);

I can use setControl, but that method does not have an option for onlySelf:

this.form.setControl('phones', array, { emitEvent: false });

I feel like onlySelf is needed there because if I am replacing the data and have complex validations, I do not want them to run on any control until entire form is patched. Thank you!

Here is a stackblitz with a demo: https://stackblitz.com/edit/angular-path-typed-array?file=src%2Fmain.ts

Gangula · Accepted Answer · 2025-01-17 05:15:38Z

7

When you patch an formArray, If the formArray have not enough elements this elements are not added. If less element, only the first elements are changed.

e.g.

formArray=new FormArray<FormGroup<IPhoneForm>>([this.newPhoneGroup()])
ngOnInit(){
  const dataArray=[{phone:'222222'},{phone:'33333'}]
  this.formArray.patchValue(dataArray)
}
newPhoneGroup()
{
  return new FormGroup({
    phone:new FormControl()
  })
}

your formArrayElement only have only one element!

You need

dataArray=[{phone:'222222'},{phone:'33333'}]

this.formArray.clear();
while (this.formArray.controls.length<dataArray.length)
  this.formArray.push(this.newPhoneGroup());


this.formArray.patchValue(dataArray)

You can also take another aproach:

Change the function newPhoneGroup like

newPhoneGroup(data:any=null)
{
  data=data || {phone:''}
  return new FormGroup({
    phone:new FormControl(data.phone)
  })
}

And write

this.formArray=dataArray.map(x=>this.newPhoneGroup(x))

edited Jan 17 at 5:15

Gangula

7,8005 gold badges53 silver badges95 bronze badges

answered Nov 20, 2023 at 7:56

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

2 Comments

Sergey Barskiy Over a year ago

Yes, correct. This works, The only challenge is that the rules will run every time you "push" into the array, even though not full data is in the reactive form yet. Therefore I think Angular is missing a feature to pass onlySelf to the push for this approach to work the same way as patch entire form.

paddotk May 9 at 13:03

You can't put plain js objects in a FormArray, only form controls (/groups/arrays).

Andrei · Accepted Answer · 2023-11-19 23:11:00Z

4

you should pass the logical value, not another form to the patch

this.form.controls.phones.patchValue([{phone: '123'}]);

or

this.form.patchValue({phones: [{phone: '123'}]})

also possible to do in one call with the name at the same time

this.form.patchValue({name: 'Jim', phones: [{phone: '123'}]})

you can add onlySelf or emitEvent if you want. they are both unrelated to the question.

answered Nov 19, 2023 at 23:11

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

2 Comments

Sergey Barskiy Over a year ago

Thank you! I mentioned onlySelf because the bigger problem I am trying to solve is to patch FormArray with number of entries larger than what exists there at the moment. patchValue will blow up. If I fire push, that method does not have an onlySelf option, therefore will run the rules on the entire form before the entire form is patched fully with new array items. I guess I will submit an enhancement request to Angular team for that. Thanks again!

Sergey Barskiy Over a year ago

Opened this issue on GitHub github.com/angular/angular/issues/53042

Collectives™ on Stack Overflow

How to patch form array in typed angular reactive forms

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related