Modifying FormBuilder Array Elements in Nested Forms
According to the API documentation, the proper way to change nested values is to use the method patchValue
myForm.patchValue({'key': {'subKey': 'newValue'}});
But how to change values in nested arrays like list for cars in this example below. How do I get the first element of the list array changing model
to Fiesta
? Plunker
myForm.patchValue({'list': 0: {'model': 'Fiesta'});
does not work.
@Component({
moduleId: __moduleName,
selector: 'my-app',
template: `<div><pre>{{ myForm.value | json }}</pre></div>`
})
export class AppComponent {
public myForm: FormGroup;
constructor(@Inject(FormBuilder) private _fb: FormBuilder) {
this.myForm = this._fb.group({
name: 'Cars',
list: this._fb.array([
this.initCar(),
this.initCar(),
this.initCar()
]),
});
/** Change value Here **/
this.myForm.patchValue({name: 'Automobile'});
};
initCar() {
return this._fb.group({
automaker: 'Ford',
model: 'Fusion'
});
}
}
source to share
I did something similar not too long ago, just add.
const patchV = (<FormArray>this.myForm.controls['list']).at(0) as FormArray;
patchV.patchValue({automaker: 'CoolCar', model: 'Bucket'})
Working example [plunker] http://embed.plnkr.co/VWicnA/
source to share
Here's a way to access and fix FormArray in Angular 2. I've modified your code to make it work with your Plunk.
import { Inject, Component } from '@angular/core';
import { FormBuilder, FormArray } from '@angular/forms';
@Component({
moduleId: __moduleName,
selector: 'my-app',
template: `<div><pre>{{ myForm.value | json }}</pre></div>`
})
export class AppComponent {
public myForm: FormGroup;
constructor(@Inject(FormBuilder) private _fb: FormBuilder) {
this.myForm = this._fb.group({
name: 'Cars',
list: this._fb.array([
this.initCar(),
this.initCar(),
this.initCar()
]),
});
this.myForm.patchValue({name: 'Automobile'});
/** Make changes here ***/
// access the array from the form
var items = this.myForm.get('list');
// change the first item
items.patchValue([{
model: 'Fiesta'
}]);
// change the second item (notice the comma in front of the array)
items.patchValue([,
{
model: 'TLX',
automaker: 'Acura'
}]);
// change the third item (notice the 2 commas in front of the array)
items.patchValue([,,
{
model: 'Accord',
automaker: 'Honda'
}]);
};
initCar() {
return this._fb.group({
automaker: 'Ford',
model: 'Fusion'
});
}
}
Conclusion before:
{
"name": "Automobile",
"list": [
{
"automaker": "Ford",
"model": "Fusion"
},
{
"automaker": "Ford",
"model": "Fusion"
},
{
"automaker": "Ford",
"model": "Fusion"
}
]
}
Exit after:
{
"name": "Automobile",
"list": [
{
"automaker": "Ford",
"model": "Fiesta"
},
{
"automaker": "Acura",
"model": "TLX"
},
{
"automaker": "Honda",
"model": "Accord"
}
]
}
EDIT: Better solution:
// access the array from the form
var items = this.myForm.get('list');
const item1 = (items).at(0);
// change the first item
item1.patchValue({model: 'Fiesta'});
// change the second item
const item2 = (items).at(1);
item2.patchValue({
model: 'TLX',
automaker: 'Acura'
});
// change the third item
const item3 = (items).at(2);
item3.patchValue({
model: 'Accord',
automaker: 'Honda'
});
source to share