Angular FormArray或FormGroup-具有额外数​​据

Question

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

<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>

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

所以问题是这样的，这是正确的方法吗？是FormArray吗？它是一个FormGroup中的一组FormControls吗？还是每个formcontrol都需要单独存在？我愿意就如何进行这项工作提出建议。

Answer 1

我想我可能已经找到了答案。关键可能是不执行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>

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

Answer 2

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

模板

<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