How to use subscribe in Angular with an array of inputs and how to sum their values?

Question

I have a reactive angular form. The form is a simple scoreboard. I would like to be able to add the rounds up together to make up a score. So when a round is finished and the score for that round is entered, it will sum up all the total rounds into that players score.

This is what I have so far:

form.component.html

<section [formGroup]="board">
  <table class="table table-bordered" formArrayName="scoreboard">
    <tr>
      <th colspan="2">Scoreboard:</th>
      <th width="150px">
        <button type="button" (click)="addPlayer()" class="btn btn-primary">
          Add Additional Players
        </button>
      </th>
    </tr>
    <tr
      *ngFor="let quantity of scoreboard().controls; let i = index"
      [formGroupName]="i"
    >
      <td>
        Name :
        <input type="text" formControlName="name" class="form-control" />
      </td>
      <td>
            Round1
            <input type="text" formControlName="round1" />
            Round2
            <input type="text" formControlName="round2" />
      </td>
      <td>
        Score:
        <input type="text" formControlName="score" class="form-control" />
      </td>
    </tr>
  </table>

  {{ this.board.value | json }}
</section>

form.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-basic-form',
  templateUrl: './basic-form.component.html',
  styleUrls: ['./basic-form.component.css']
})
export class BasicFormComponent  {
  board: any;

  constructor (private fb: FormBuilder) {
    this.board = this.fb.group({
      scoreboard: this.fb.array([this.game(), this.game()])
    });
  }
  scoreboard() : FormArray {  
    return this.board.get("scoreboard") as FormArray  
  }  

  game(): FormGroup {  
    return this.fb.group({  
      name: '',  
      score: '',
      round1: [''],
      round2: ['']
    })  
  }       
  addPlayer() {  
    this.scoreboard().push(this.game());  
  }  
  onSubmitForm () {
    console.log(this.board.value);
  }
}

Really just starting to learn Angular and wanted to try something on my own. If you could be detailed or show me somewhere I can learn additional information about the solution that would be great!

Munzer · Accepted Answer · 2022-02-23 16:25:47Z

You can listen to your group's controls value changes, and update the score accordingly. Your form array is made of list of form groups (the return value of game function), these groups have controls which holds the values for their respective index, so when you create a form group, you can listen to round1 and round2 changes, and update score accordingly. For example, what I did below is using combineLatest function to merge both value changes observables (round1 + round2) and then update the score accordingly. So now every new form group pushed to your form array will have its own value change listener and will update the score.

  game(): FormGroup {  
    const gameGroup = this.fb.group({  
      name: '',  
      score: '',
      round1: [''],
      round2: ['']
    });
    combineLatest(gameGroup.get('round1').valueChanges,gameGroup.get('round2').valueChanges)
    .subscribe(([r1,r2]) => gameGroup.get('score').setValue(Number(r1) + Number(r2)));
    return gameGroup;
  }

Collectives™ on Stack Overflow

How to use subscribe in Angular with an array of inputs and how to sum their values?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related