Gracias de antemano a todas las posibles ayudas, respuestas o sugerencias. Os pongo en situación para poder explicar mi problema: Tengo un modal, dentro del modal tengo una tabla, y dentro de la tabla tengo un formulario (el cual rellena un usuario). Este formulario tiene un formGroup (llamado formComprobante) y dentro tiene un formArray (llamado datosCuenta). Dejo el código de este apartado (.ts):
constructor(private formBuilder: FormBuilder) {
this.formComprobante = this.formBuilder.group({
numComprobante: [''],
tipoComprobante: [''],
fecha: [''],
tipoDocumento: [''],
glosaIndex: [''],
datosCuenta: this.formBuilder.array([])
})}
get datosCuenta(): FormArray{
return this.formComprobante.get('datosCuenta') as FormArray}
addDatosCuenta(){
const tabla = this.formBuilder.group({
cuentaInput: (''),
glosaInput: (''),
centroInput: (''),
sucursalInput: (''),
debeInput: (''),
haberInput: ('')
})
this.datosCuenta.push(tabla)}
En mi código HTML yo tengo la tabla, y es el usuario quien va rellenando los campos, en mi botón "+" se va agregando todas las filas que el usuario desee y en el icono del basurero se van quitando. Pongo el ejemplo para una mejor visualización:
Este es mi código .html (eliminé un poco de código para que no fuese tan tedioso leerlo y dejé lo principal):
<form [formGroup]="formComprobante" autocomplete="off">
<!-- TABLA CUENTAS -->
<table class="table table-borderless">
<thead>
<tr>
<th scope="col" colspan="2">SALDO: ${{getValores()}}</th>
</tr>
<tr class="color-tabla">
<th scope="col">DEBE ($)<p>Total debe: ${{totaldebe}} </p></th>
<th scope="col">HABER ($)<p>Total haber: ${{totalhaber}}</p></th>
</tr>
</thead>
<tbody>
<!-- FILA QUE APARECE EN LA TABLA -->
<ng-container formArrayName="datosCuenta">
<ng-container *ngFor="let tabla of datosCuenta.controls; let i = index;">
<ng-container >
<tr [formGroupName]="i">
<th scope="row">{{i+1}}</th>
<td>
<a class="btn-icono" (click)="removeDatosCuenta(i)"></a>
</td>
<td>
<input type="number" class="form-control" formControlName="debeInput" >
</td>
<td >
<input type="number" class="form-control" formControlName="haberInput">
</td>
</tr>
</ng-container>
</ng-container>
</ng-container>
<a class="btn-icono" (click)="addDatosCuenta()"></a>
</tbody>
</table>
</form>
Mi problema es el siguiente: Necesito sumar todos los campos que el usuario ingrese de "debeInput" y "haberInput", insertar el total de esa suma en "Total debe" y "Total haber" y posteriormente realizar una resta de ambos totales e insertarlo en "Saldo". He probado varias formas de realizarlo en mi archivo .TS (las cuales no sé si serán correctas), y ninguna me ha funcionado realmente al 100:
Aquí me obtiene solo los valores de la primera fila, por lo que al añadir la segunda no los suma ni resta
getValores(){
this.totaldebe = this.formComprobante.get('datosCuenta').value[0].debeInput
this.totalhaber = this.formComprobante.get('datosCuenta').value[0].haberInput
this.totalresta = this.totaldebe - this.totalhaber
return this.totalresta}
En este otro intento, me daba el siguiente error "Cannot read properties of undefined (reading 'reduce')", por lo que añadí la ? a datosCuenta y se quitó el error pero salen como resultados "undefined" y "NaN".
getValores(){
this.totaldebe = this.formComprobante.datosCuenta?.reduce((acc, debe) => acc + (debe.debeInput || 0), 0)
console.log('el total debe es: '+this.totaldebe)
this.totalhaber = this.formComprobante.datosCuenta?.reduce((acc, haber) => acc + (haber.haberInput || 0), 0)
console.log('el total haber es: '+this.totalhaber)
this.totalresta = this.totaldebe - this.totalhaber
console.log('la resta total es: '+this.totalresta)
return this.totalresta}
En este último intento, me salía el mismo error de "Cannot read properties of undefined (reading 'map')", añado la ? después de datosCuenta, y me sale el mismo resultado de "undefined y NaN"
getValores(){
this.totaldebe = this.formComprobante.datosCuenta.map(obj => obj.debeInput)
console.log('mapeo del debe: ' +this.totaldebe)
this.totalhaber = this.formComprobante.datosCuenta.map(obj => obj.haberInput)
console.log('mapeo del haber: ' +this.totalhaber)
this.totalresta = this.totaldebe - this.totalhaber
console.log('total resta: ' +this.totalresta)
return this.totalresta}
Todas mis variables (totaldebe, totalhaber y totalresta) están inicializadas a 0. Disculpad si es muy largo, quería dejar todo aclarado y que no quedaran dudas de cuál es mi propósito y que es lo que he hecho hasta ahora. Ya no sé que más hacer, gracias por la ayuda :)