0

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: introducir la descripción de la imagen aquí

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 :)

1 respuesta 1

0

Después de muchos días e intentos encontré una solución por si a alguien le sirve de ayuda:

getValDebe(){
this.valordebe = this.formComprobante.value.datosCuenta.reduce((acc, debe) => acc + (debe.debeInput || 0), 0)}


getValHaber(){
this.valorhaber = this.formComprobante.value.datosCuenta.reduce((acc, haber) => acc + (haber.haberInput || 0), 0)}

getResta(){
this.totalresta = this.valordebe - this.valorhaber}

Separé las funciones, e hice uno de los primeros intento, solo le agregué el ".value" después de formComprobante y realizó las operaciones que necesitaba :)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.