修改嵌套表单中FormBuilder数组项

Question

根据API文档，更改嵌套值的正确方法是使用patchValue方法。但是如何更改嵌套数组中的值，例如此示例中的汽车列表。如何获取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

- khex

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/

（本段文字为原文，无需翻译）

- edumas000

---

非常简洁的解决方案。但是这个语法对我来说不是很清晰，特别是 .at(0) 方法？ - khex

嘿，谢谢。是的，请查看此文档 https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html在表单数组中，您有一个方法可以获取 at(index: number) : AbstractControl。 - edumas000

Answer 2

以下是一种访问和修补Angular 2中的FormArray的方法。我已经修改了您的代码，使用您的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'
    });
  }

}

之前的输出：

{
  "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"
    }
  ]
}

编辑：更好的解决方案：

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

- R. Richards

---

哦，但我怎么通过索引获取项目呢？list[9] = [,,,,,,,,,]？ - khex

是的，这并不理想。通过索引访问会更好。我尝试过了，但时间已经很晚了，我想先发布出去。我可能会再调整一下。 - R. Richards