Angular FormArray 或 FormGroup - 带有额外数据答案

【问题标题】：Angular FormArray or FormGroup - With Extra DataAngular FormArray 或 FormGroup - 带有额外数据
【发布时间】：2019-07-23 23:04:26
【问题描述】：

我有一个动态创建的表，它显示数据如下：

<table>
  <tr *ngFor="let product of products">
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.value}}</td>
    <!-- BELOW IS WHERE A NEW VALUE WILL BE ENTERED -->
    <td><input type="text" value=""></td>
  </tr>
</table>

我已经读到处理这个问题的适当方法是使用 FormsArray。但我也读到了使用 FormsArray 的适当方法是获取它的控件数组：

<table>
  <tr *ngFor="let product of this.form.get('productCollection').controls; let i = index;"
     [formGroupName]="i">
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.value}}</td>
    <!-- BELOW IS WHERE A NEW VALUE WILL BE ENTERED -->
    <td><input type="text" formControlName="name"></td>
  </tr>
</table>

问题是我无法访问此处的描述值。而且我还没有找到一种方法将它作为元数据传递给控件，以便我可以显示它。

所以问题是这样的，正确的方法是什么？是表单数组吗？它是一个 FormGroup 中的一组 FormControls 吗？还是每个表单控件都需要单独存在？我愿意接受有关如何完成这项工作的建议。

【问题讨论】：

标签： angular dynamic-forms reactive-forms formarray formgroups

【解决方案1】：

在这种情况下，我将遍历实际的产品数组，而不是控件数组，因为与控件相比，您需要来自数据的更多信息。

模板

<form [formGroup]="form">
  <table formArrayName="productRows">
    <tr *ngFor="let product of products; let i = index;" [formGroupName]="i">
      <td>{{product.name}}</td>
      <td>{{product.description}}</td>
      <td><input type="text" formControlName="value"></td>
    </tr>
  </table>
</form>

组件

buildForm() {
  this.form = this.fb.group({
    productRows: this.fb.array(this.initProductRows())
  });
  this.form.valueChanges.subscribe((change) => {
    this.products.forEach((product, index) => {
      product.value = change.productRows[index].value;
    })
  });
}

initProductRows() {
  return this.products.map(product => {
    return this.fb.group({
      value: product.value
    });
  });
}

这里的部分关键是在将表单构建为与产品数据相同的长度（并且具有相同的值）时，在开始时初始化您的 FormArray。

另外，我不确定您是否尝试将新值保存回原始产品数据，但如果是，我添加了一个 valueChanges 侦听器，以便您可以将其写回。在下面的 Stackblitz 中查看全部内容。

https://stackblitz.com/edit/angular-edawnf

【讨论】：

【解决方案2】：

我想我可能已经找到了答案。关键可能是不做一个 FormArray，而是一个 FormGroup 中的一个 FormControls 数组。这样，我可以继续使用包含所有数据的列表，然后添加基于 FormGroup 的字段。所以，最终的结果是：

<table>
  <tr *ngFor="let product of products">
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.value}}</td>
    <!-- BELOW IS WHERE A NEW VALUE WILL BE ENTERED -->
    <td>
      <div formGroupName="productCollection">
        <input type="text" formControlName="name">
      </div>
    </td>
  </tr>
</table>

如果我错了，或者如果有人有更好的方法，请务必指出并告诉我！

【讨论】：