Question

这是example：

  constructor(public fb: FormBuilder) {
    this.form = this.fb.group({
      foobars: this.fb.array([fb.group({ foo: null, bar: null })]),
      baz: null
    });

    const formValues = {
      foobars: [
        { foo: 1, bar: 'one'}
        { foo: 2, bar: 'two'}
      ],
      baz: 'baz'
    };

    this.form.reset(formValues);
  }

  addFoobar() {
    this.form.controls.foobars.push(this.fb.group({ foo: null, bar: null }))
  }

一个模板：

<div>
  <div *ngFor="let foobar of form.controls.foobars.controls">
    foo: <input [formControl]="foobar.controls.foo" type="number">
    bar: <input [formControl]="foobar.controls.bar">
  </div>
  baz: {{ form.controls.baz.value }}
  <button (click)="addFoobar()">Add foobar</button>
</div>

表单应该具有可变数量的foo / bar控制对。然后在数据库中存储为foobars数组并作为普通对象检索（formValues在此示例中是静态的，但实际上并非如此。）

问题是reset不会自动在foobars表单数组中创建嵌套控件，而我希望它会自动生成。

如何使用reset在此处设置表单值？是否foobar手动创建fb.group({ foo: ..., bar: ... })])项是添加/设置嵌套控件的唯一正确方法？

Answer 1

你可以尝试重构你的构造函数，如：

constructor(public fb: FormBuilder) {
  this.form = this.fb.group({
    foobars: this.fb.array([]),
    baz: null
  });

  this.addFoobar = () => {
    this.form.controls.foobars.push(this.fb.group({ foo: null, bar: null }))
  }  

  const formValues = {
    foobars: [
      { foo: 1, bar: 'one'}
      { foo: 2, bar: 'two'}
    ],
    baz: 'baz'
  };
  formValues.foobars.map(this.addFoobar);

  this.form.reset(formValues);
}

foobars表单数组由 FormBuilder 创建，带有空数组
foobars表单数组使用formValues.foobars.map()函数填充初始条目，该函数为每次迭代执行addFoobar()。

this.form.reset(formValues)

表单
@DeborahK，我不同意你的意见

您无法使用setValue设置FormArray

这是这个函数：https://github.com/angular/angular/blob/c59c390cdcd825cca67a422bc8738f7cd9ad42c5/packages/forms/src/model.ts#L1221。

在更新的plunker上，我添加了“设置表单数组的值”按钮，当有3个数组项时，启用该按钮，单击该按钮将使用setValue()函数更新表单数组：
```
setFaValue() {
  this.form.get('foobars').setValue([
    { foo: 10, bar: 'one0'},
    { foo: 20, bar: 'two0'},
    { foo: 30, bar: 'three0'}
  ]);
}
```
更新了plunker：http://plnkr.co/edit/XALYC8hUxkY0hIJrGLHx?p=preview

使用FormBuilder在FormArray中设置嵌套控件

1 个答案: