• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

412
Views
¿Cómo usar suscribirse en Angular con una matriz de entradas y cómo sumar sus valores?

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!

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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; }
about 3 years 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 vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error