Angular table row contains sum of columns dynamically using Reactive Forms

Question

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   |    |    |

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));
}

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

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?

Thanks in advance.

Best Regards.

Answer 1

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

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
})

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

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([])

And use in .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>

//or

<!--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>