Home / Questions / 563967
Accepted
MoiOvalle
Asked: 2022-10-24 20:48:04 +0800 CST 2022-10-24 20:48:04 +0800 CST

How can I display the Value of a Reactive Form in a Grid in Angular/Ionic?

  • 772

I am creating an application in Ionic using Angular and I have the following Form

this.CalcLecheForm = this.formBuilder.group({
      cedula:['', [Validators.required]],
      propietario:['',[Validators.required]],
      finca:['',[Validators.required]],
      latitud:[this.lat],
      longitud:[this.lon],
      altitud:[,[Validators.required]],
      extension:[,[Validators.required]],
      emisiones_co2_totales: [this.co2_eq_totales]
    })

How can I show what total_co2_emissions contains in the following grid when I click on a calculate button?

<ion-grid fixed class="grillasalida">
           <ion-row> 
            <ion-col size="6" size-sm>Parametro</ion-col>
            <ion-col size="3" size-sm>Valor</ion-col>
            <ion-col size="3" size-sm>Medida</ion-col>
          </ion-row>
          <ion-row class="ion-align-items-center">
            <ion-col size="6" size-sm>Emisiones de CO2-eq totales</ion-col>
            <ion-col size="3" size-sm> (Aqui iria el valor de emisiones_co2_totales )</ion-col>
            <ion-col size="3" size-sm>kg CO2-eq/año</ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="6">
              <ion-fab-button fablimpiar data-desc="Cancelar" (click)="CancelCalc()" [disabled]="!CalcLecheForm.enabled">
                <ion-icon name="close-outline"></ion-icon>
              </ion-fab-button>
            </ion-col>
            <ion-col size="6">
              <ion-fab-button fabguardar (click)="Calc()" data-desc="Calcular" [disabled]="!CalcLecheForm.valid">
                <ion-icon name="save"></ion-icon>
              </ion-fab-button>
            </ion-col>
          </ion-row>
 </ion-grid>

I appreciate the help

angular

1 Answers

  1. Best Answer

    You can call the form as a class instance, which in turn has the function get():

     <ion-col size="6" size-sm>Emisiones de CO2-eq totales</ion-col>
            <ion-col size="3" size-sm> {{CalcLecheForm .get('emisiones_co2_totales').value}}</ion-col>
            <ion-col size="3" size-sm>kg CO2-eq/año</ion-col>
    • 1