角表行包含使用“反应式表单"动态生成的列总和 [英] Angular table row contains sum of columns dynamically using Reactive Forms

问题描述

我正在角度项目中工作，我想显示一个具有两列的表，并且当用户键入任何数字时每列的动态行和最后一行包含总和，这就是我想要实现的目标:

i'm working in angular project where i want to show a table with two columns and dynamic row and last row conatins sum of each column when user type any number , this is what i want to achieve :

element | FR | EN |
-------------------
elem A  |    |    |
-------------------
elem B  |    |    |
-------------------
elem C  |    |    |
-------------------
Total   |    |    |

这是我的角度代码: componenet.ts:

and this is my angular code : componenet.ts :

listDecompositionLibelle: string[] = ['elem A', 'elem B','elem C'];

ngOnInit() {

    this.valuesForm = this.fb.group({
          decomposition : this.fb.array([
          ])
    });

    for (let i = 0; i < 3; i++) {
          this.addDecompositionLigne(this.listDecompositionLibelle[i]);
    }
}

// function to add element to array
 addDecompositionFormGroup(typeDecomposition): FormGroup {
                 return this.fb.group({
                  type: [typeDecomposition],
                  frVal: [''],
                  enVal: ['']
                 });
 }

 // function to push my array
addDecompositionLigne(typeDecomposition) {
           (<FormArray>this.valuesForm.get('decomposition')).push(this.addDecompositionFormGroup(typeDecomposition));
}

这是我的html代码:

and this is my html code :

<table class="table table-bordered" formArrayName="decomposition">
      <tbody>
          <tr>
            <th>element</th>
            <th>FR</th>
            <th>EN</th>
        </tr>
        <tr *ngFor="let decomposition of valuesForm.get('decomposition ').controls;let i=index" [formGroupName]="i" >
          <td>
              {{listDecompositionLibelle[i]}}
            </td>
            <td>
              <input type='text' class="form-control" formControlName="frVal" [id]="'frVal'+i">
            </td>
            <td>
              <input type='text' class="form-control" formControlName="enVal" [id]="'enVal'+i">
            </td>
            <td>
        </tr>
      </tbody>
</table>
// i want to add a row that calculte the sum of the values in each column of my table

您是否知道如何在用户开始在inouts中输入值时添加一行以动态计算每列中值的总和?

do you have any idea on how to add a row that calculate dynamically the sum of values in each column when the user start to type a value in the inouts?

谢谢.

最好的问候.

推荐答案

詹姆斯，在角度上，观察者订阅了valueChanges.

James, in angular the changes are observer subscribe to valueChanges.

如果声明两个变量sumFR和sumEN，则可以在声明表单之后

If you declare two variables sumFR and sumEN, you can AFTER declare the form

this.valuesForm.get('decomposition').valueChanges.subscribe(res=>{
   //here we has res, so we can make some like
   let sumFR=0
   let sumEN=0
   res.forEach(x=>{
      sumFR+=(+x.frVal);  //<--the +x.frVal is to convert first to number
      sumEN+=(+x.enVal); 
   })
   this.sumFR=sumFR;
   this.sumEN=sumEN
})

在.html中，您使用{{sumEN}}和{{sumFR}}

In .html you use {{sumEN}} and {{sumFR}}

顺便说一句，无需创建一个内部带有FormArray的FormGroup.您可以简单地声明

By the way is innecesary create a FormGroup with a FormArray inside. You can simple declare

decomposition=new FormArray([])
//or using FormBuilder
decomposition=this.fb.array([])

并在.html

<!--see that we used [formGroup]="item", not [formGroupName]="i"-->
<tr *ngFor="let item of decomposition.controls;let i=index" [formGroup]="item" >
  <td><input formControlName="valEn"></td>
  <td><input formControlName="valFn"></td>
</tr>

//或

<!--see that declare the formGroup=the formArray
<div [formGroup]="decomposition">
   <!--and now, we can use [formGroupName]="i"-->
   <tr *ngFor="let item of decomposition.controls;let i=index" [formGroupName]="i" >
      <td><input formControlName="valEn"></td>
      <td><input formControlName="valFn"></td>
   </tr>
</div>

这篇关于角表行包含使用“反应式表单"动态生成的列总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！