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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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