Guide on how to update an array within typed angular reactive forms

Question

Guide on how to update an array within typed angular reactive forms

I'm currently working on finding a solution for patching a form array in a strongly-typed reactive Angular form. I've noticed that patchValue and setValue don't consistently work as expected with FormControl. Here's an example of the form:

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

Patching the name control is straightforward:

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

However, dealing with the form array poses a challenge. Let's say I create a replacement array:

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

Now, attempting to patch (or set) the array results in compilation errors:

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

Although I can use setControl, this method lacks the option for onlySelf:

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

I believe that onlySelf is essential in this scenario because when replacing the data and dealing with complex validations, I prefer to defer running them on any control until the entire form has been patched. Thank you!

For a demonstration, here's a stackblitz link: https://stackblitz.com/edit/angular-path-typed-array?file=src%2Fmain.ts

arrays angular typescript angular-reactive-forms strong-typing

Answer 1

Answer №1

When you update a formArray, if the array does not have enough elements, those elements are not added. Only the first elements will be updated if there are fewer elements.

For example:

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 has one element!

You can do the following:

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

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

this.formArray.patchValue(dataArray)

Alternatively, you can modify the newPhoneGroup function like this:

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

Then write:

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

Answer 2

When you update a formArray, if the array does not have enough elements, those elements are not added. Only the first elements will be updated if there are fewer elements.

For example:

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 has one element!

You can do the following:

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

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

this.formArray.patchValue(dataArray)

Alternatively, you can modify the newPhoneGroup function like this:

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

Then write:

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

Answer 3

Answer №2

It's important to pass the logical value, rather than another form, when using patch method

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

Alternatively,

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

You can also combine both actions into one call by specifying the name as well:

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

If needed, you have the option to include onlySelf or emitEvent parameters, which are not directly related to the main question.

Answer 4

It's important to pass the logical value, rather than another form, when using patch method

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

Alternatively,

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

You can also combine both actions into one call by specifying the name as well:

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

If needed, you have the option to include onlySelf or emitEvent parameters, which are not directly related to the main question.

Guide on how to update an array within typed angular reactive forms

Answer №1

Answer №2

Similar questions

Angular - A Guide to Managing User Roles by Toggling Checkbox Values

Is it possible to display the combined string when concatenating two strings?

Issue with Angular4 ngFor - Unable to locate a distinguishable entity supporting the object '[object Object]' categorized as 'object'

Secure your TypeScript code by encapsulating it with protection mechanisms and distribute

Material-UI: Error thrown when attempting to pass props to makeStyles in React due to missing property 'X' on type '{}'

Struggling with breaking a string into an array in C

Subscribing to an RxJs Subject and receiving multiple values

Passing the value of the attribute from event.target as a parameter in a knockout click event

Arrangement of items in Angular 2 array

Retrieve parent route parameters from a dynamically loaded route component

Encounter an error while attempting to store and retrieve an array of JavaScript objects in localStorage and parsing the data

ngx-upload-core and media files

Why is my Angular promise unexpectedly landing in the error callback?

Tips for retrieving a JSON object value using a key in Angular 6 View

What is the best way to change a timestamp into a date format using Angular?

The Content Security Policy directive has blocked the font from loading

What is the best way to extract multiple records from an Array?

Instructions on transferring JSON data to clipboard using a button

How can I use Typescript to define a function that accepts a particular string as an argument and returns another specific string?

Styling a <slot> within a child component in Vue.js 3.x: Tips and tricks