Utilizing the patchValue function in Angular 2 Reactive forms to update elements within an FormControl Array

Question

I am currently working with a reactive form in my project:

myForm = this.fb.group({
    ...
}

and I have been updating fields using buttons and functions like the following:

(click)="update('someKey', someValue)"

The update function is structured as shown below:

update(key, value) {
    if (key && value && this.myForm.contains(key)) {
        this.myForm.controls[key].patchValue(value)
    }
}

This approach has worked effectively so far, allowing me to use the same function for various form elements by passing their names as keys.

However, now there is an fb.array included in the form:

myForm = this.fb.group({
   ...
   items: this.fb.array([]),
}

With the structure as follows:

items: {"name":"", "description":"")

Now, I need to find a way to update the array values using a similar method. How can I modify

this.myForm.controls[key].patchValue(value)

To work with the fb.array? I believe I could pass the index of the array element I wish to access.

So it would be something like:

(click)="update(index, 'someKey', someValue)"


this.myForm.controls[items(index).controls[key].patchValue(value)

Or

this.myForm.get(`items${index}.${key}`).patchValue(value)

However, I have encountered issues with this implementation.

Answer 1

Answer №1

Just like clockwork, right after I posted the question, a solution popped up in a different forum (Shout out to andreysuperstar!)

this.myForm.get(`items.${index}.${key}`).patchValue(value)

I had overlooked including the dot between items and ${index}

Problem solved!

Answer 2

Just like clockwork, right after I posted the question, a solution popped up in a different forum (Shout out to andreysuperstar!)

this.myForm.get(`items.${index}.${key}`).patchValue(value)

I had overlooked including the dot between items and ${index}

Problem solved!