4

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

<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 吗？还是每个表单控件都需要单独存在？我愿意接受有关如何完成这项工作的建议。

4

2 回答 2

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

于 2019-03-01T22:19:20.317 回答
0

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

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

于 2019-03-01T22:18:33.563 回答