Question

我有一个可以向其添加行的动态表。如何在col 3中动态设置数据？我正在使用表单生成器来创建我的表单，并且有一个方法可以接受在表中动态插入行。当我在col1中写一些东西时，我订阅了更改并计算两个cols的总和，将它放在第三个col上。

DWORD x = 0;
InternetReadFile(..., &x);

Answer 1

我将上面的代码添加到我的项目中，除了一点改变之外它工作得很好......我不得不将ctrl转换为FormArray：

    const ctrl = <FormArray>this.customerForm.controls['addresses'];
    ctrl.controls.forEach((field) => {
      const col1 = parseInt(field.get('street1').value, 10);
      const col2 = parseInt(field.get('street2').value, 10);
      const sum = col1 + col2;
      // How to set these values to col3?
      field.get('city').setValue(sum);
    });

（我的例子使用了地址，所以我只是在地址字段中填入数字来试试这个。）

当你说它不适合你时......你得到错误吗？如果是，那么错误是什么？

您可以在此处找到我使用的代码：https://github.com/DeborahK/Angular2-ReactiveForms/tree/master/Demo-Final-Updated

我刚刚将上述更改添加到populateTestData方法中，并按预期工作...

Answer 2

我要做的是跳过valueChanges并使用ngModel的单向绑定作为列的总和。不知道模板的外观，您有几个选择：

将禁用的输入字段显示为第三列，或者然后使用隐藏的输入字段，而是显示<p>。

如果您使用已停用的字段，则需要使用getRawValue()来获取已禁用字段的值。

通常我不建议将ngModel与反应形式一起使用，但在这种情况下它很好，因为我们不使用它将它绑定到TS中的单独变量。

所以这里是隐藏选项代码的样子：

<table formArrayName="rows">
  <tr *ngFor="let item of myForm.controls.rows.controls; let i = index" [formGroupName]="i">
    <td><input type="number" formControlName="col1"></td>
    <td><input type="number" formControlName="col2"></td>
    <td> <input type="number" hidden formControlName="col3" [ngModel]="item.controls.col1.value + item.controls.col2.value"></td>
    <td><p>{{item.controls.col3.value}}</p></td>
  </tr>
</table>

<强> StackBlitz

如何在Angular2 / 4 FormArray字段中动态设置值？

2 个答案: