Question

我想获取每一行中输入的值并获取这些行的总和。

我的HTML：

<ng-container formArrayName="cap_values">
    <tbody *ngFor="let item of capValues.controls; let i=index" [formGroupName]="i">
        <tr>
            <td class="freeze-first-col"><input type="text" (blur)="getName(item.value.name)" formControlName="name"></td>
            <td><input type="number" formControlName="fdnTotalShares"</td>
        </tr>
    </tbody>
</ng-container>

我的.ts：

ngOnInit() {
  this.form = this.fb.group({
    cap_values: this.fb.array([this.fb.group({
      name: '',
      fdnTotalShares: '',
    }
    )])
  })
}

如何遍历数组中的每个值并将其求和？我见过.valueChanges，但不确定如何使用它。

Answer 1

您可以通过多种方式执行此操作，我将写下一些内容：

第一种方式：

get capValues(): FormArray {
    return this.form.get('cap_values') as FormArray;
}

getSum() {
    this.sum = this.capValues.value.reduce((prev, next) => prev + +next.fdnTotalShares, 0);
    // OR
    // this.sum = this.capValues.getRawValue().reduce((prev, next) => prev + +next.fdnTotalShares, 0);
}

注意+中的+next.fdnTotalShares符号，这不是一个错误，它是为了确保您得到数字的总和（假设fdnTotalShares始终是数字），而不是字符串串联。

第二种方式：

this.sum = 0;
this.capValues.value.forEach(x => {
      this.sum += +x.fdnTotalShares;
});

如果您有一些被禁用的控件并且想将它们包括在计算中，则可以使用value代替getRawValue()。

Here是一个演示的例子，它证明了这一点（我也包括了enabled和disabled控件的区别）。

编辑：要在评论中回答您的问题，这类似于我上面写的求和示例：

multiplyAndStore() {
    const multiplicationRes = this.capValues.value.reduce((prev, next) => prev * +next.fdnTotalShares, 1);
    // Assuming that "formControlName" for multiplication result input is 'multiplyResult'
    this.form.get('multiplyResult').setValue(multiplicationRes);
    // You can also use "patchValue" method instead of "setValue"
    // this.form.get('multiplyResult').patchValue(multiplicationRes);
}

我已经更新了stackblitz示例，以便您可以实际看到它。

希望这会有所帮助。

Answer 2

您可以循环浏览表单控件

let total = 0;
form.controls.foreach(data => {
  total += data.fdnTotalShares.value;
})

要确保使用控制台日志来获取正确的表单控件

Answer 3

我在这里尝试过。 One

 console.log(this.form.length);
 console.log(this.form.value);

Answer 4

使用valueChanges观测值来实现。

在组件中，创建表单后，请在表单数组valueChanges中订阅cap_values。

import { Subscription } from 'rxjs';

total: number = 0;
subscription: Subscription;

ngOnInit() {
    // Create your form here

    this.subscription = this.capValues.valueChanges.subscribe(data => {
        this.total = data.reduce((a,b) => a + +b.fdnTotalShares, 0)
    });
}

get capValues() {
    return this.form.get('cap_values') as FormArray;
}

现在，无论您想在模板中的何处显示总计，都只需使用{{total}}，它就会随着您更改fdnTotalShares输入中的值而动态更新。

最后，不要忘记退订valueChanges。这就是为什么我在上面的代码片段中介绍了subscription变量的原因。

ngOnDestroy() {
    this.subscription.unsubscribe();
}

这是StackBlitz上一个简单的工作示例。

全面获取FormArray Angular 8

4 个答案: