Tengo una forma angular reactiva. El formulario es un simple marcador. Me gustaría poder sumar las rondas para formar una puntuación. Entonces, cuando finaliza una ronda y se ingresa la puntuación de esa ronda, se sumarán todas las rondas totales en la puntuación de los jugadores.
Esto es lo que tengo hasta ahora:
formulario.componente.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>formulario.componente.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); } }Realmente recién comencé a aprender Angular y quería probar algo por mi cuenta. Si pudiera ser detallado o mostrarme algún lugar donde pueda obtener información adicional sobre la solución, ¡sería genial!
Puede escuchar los cambios de valor de los controles de su grupo y actualizar la puntuación en consecuencia. Su matriz de formularios está hecha de una lista de grupos de formularios (el valor de retorno de la función del juego), estos grupos tienen controles que contienen los valores para su índice respectivo, por lo que cuando crea un grupo de formularios, puede escuchar los cambios de la ronda 1 y la ronda 2, y actualizar la puntuación en consecuencia. Por ejemplo, lo que hice a continuación es usar la función combineLatest para fusionar los observables de cambios de valor (ronda1 + ronda2) y luego actualizar la puntuación en consecuencia. Entonces, ahora cada nuevo grupo de formularios enviado a su matriz de formularios tendrá su propio oyente de cambio de valor y actualizará la puntuación.
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; }