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

Question

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

    public sumRow() {
        this.myForm
          .get('rows')
          .valueChanges
          .subscribe((val) => {

             // latest edit
             val.foreach((item) => {
                item.col3 = item.col1 + col2;
                // But this one does not fill the col3 but 
                // it already giving the correct values
             });

             //loop to the val instead 

             // const ctrl = this.myForm.controls['rows'];
             // ctrl.controls.forEach((field) => {
             // const col1 = parseInt(field.get('col1').value, 10);
             // const col2 = parseInt(field.get('col2').value, 10);
             // const sum = col1 + col2;
             // How to set these values to col3?
             // Doesn't work: field.get('col3').setValue(sum);
        });
    }

  public createForm() {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
    });
  }

  public pushRowItems(items) {
    this.myForm.addControl('rows', this.fb.array([items]));
  }

  public initItemRows() {
    return this.fb.group({
      col1: 0,
      col2: 0,
      col3: 0,
    });
  }

  public ngOnInit() {
    this.createForm();
    this.pushRowItems(this.initRowItems());
    this.sumRow();
  }

Answer 1

我会做的是跳过 valueChanges并使用单向绑定(bind) ngModel对于您的列的总和。不知道您的模板长什么样，您有几个选择:

将禁用的输入字段显示为第三列，或者然后使用隐藏的输入字段并改为显示例如 <p> .

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

通常我不推荐使用 ngModel与 react 形式一起使用，但在这种情况下没问题，因为我们不使用它将它绑定(bind)到 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