ネストされたフォームの変更FormBuilderアレイ項目

Question

APIドキュメントによると、ネストされた値を変更する適切な方法は、方法patchValue

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

しかし、どのように車のリストのようなネストされた配列の値を変更する方法を使用することです以下のこの例では、どのようにのリストの最初の項目を取得する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

は、私は、これはあなたのPlunkを使用して動作させるためにあなたのコードを変更した角度2にFormArrayにアクセスし、パッチを適用する方法です。

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