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

【问题标题】：Setting nested controls in FormArray with FormBuilder使用 FormBuilder 在 FormArray 中设置嵌套控件
【发布时间】：2018-02-08 11:10:03
【问题描述】：

这是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: ... })]) 是添加/设置嵌套控件的唯一正确方法吗？

【问题讨论】：

因为你是在构造函数中设置值，所以标记也不需要重置，你不能用 setValue() 方法代替吗？
不能用setValue来设置FormArray，不行。
这很有趣：github.com/angular/angular/issues/10960
@DeborahK 确实很有趣。该问题看起来相似并且已关闭，但仍然存在。我想我现在就结束这个问题。它可能应该被报告。感谢您的参与。
但是，setValue() - 设置 FormArray 的值。它接受与控件结构匹配的数组。我没有说我是对的，但欢迎更多解释

标签： angular typescript angular2-forms angular2-formbuilder

【解决方案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

【讨论】：