Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

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

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!

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

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;
  }       
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.