Изменить FormBuilder элементы массива в вложенных форм

Question

Согласно документации API надлежащим образом изменять иерархические значения является использование метода patchValue

myForm.patchValue({'key': {'subKey': 'newValue'}});

Но как изменить значения в вложенных массивов как список автомобилей в этом примере ниже. Как получить первый элемент от list массив изменений model до Fiesta? Plunker

myForm.patchValue({'list': 0: {'model': 'Fiesta'}); не работает.

@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' 
    }); 
    } 
} 

Plunker

Answer 1

я сделал что-то подобное не так давно просто добавить.

const patchV = (<FormArray>this.myForm.controls['list']).at(0) as FormArray; 
patchV.patchValue({automaker: 'CoolCar', model: 'Bucket'}) 

Рабочий пример [plunker] http://embed.plnkr.co/VWicnA/

Answer 2

Вот способ доступа и залатать FormArray в угловых 2. Я изменил код, чтобы получить эту работу, используя свой шлепнуть.

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' 
    }); 
    } 

} 

Выхода перед:

{ 
    "name": "Automobile", 
    "list": [ 
    { 
     "automaker": "Ford", 
     "model": "Fusion" 
    }, 
    { 
     "automaker": "Ford", 
     "model": "Fusion" 
    }, 
    { 
     "automaker": "Ford", 
     "model": "Fusion" 
    } 
    ] 
} 

выхода после того, как:

{ 
    "name": "Automobile", 
    "list": [ 
    { 
     "automaker": "Ford", 
     "model": "Fiesta" 
    }, 
    { 
     "automaker": "Acura", 
     "model": "TLX" 
    }, 
    { 
     "automaker": "Honda", 
     "model": "Accord" 
    } 
    ] 
} 

EDIT: лучшего решения:

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