Numeric Form Input Limit for Max and calculate 2nd field with it

@egaldamez wrote:

Hello everyone, im having a issue with a form i have a field called “puntoscanje”, the user can modify this field entering a number, i need to check the number the user set after changes had done in the field and then calculate a 2nd field, im trying to do it with a function to set the value BUT, sometimes it work sometimes it dont.
For example:
If the max value is 170, and the user writes down 200 it verifies each number like this:
2>170
20>170
200>170 and it sets the value to 170.

BUT if i type on the input 170 first, and then another number like 1702 and so on. its not changing.

Page ts.

import { Component, OnInit } from '@angular/core';

import { Storage } from '@ionic/storage';
import { GetService } from '../../get.service';

@Component({
  selector: 'app-canjepuntos',
  templateUrl: './canjepuntos.page.html',
  styleUrls: ['./canjepuntos.page.scss'],
})
export class CanjepuntosPage implements OnInit {
  points: any;
  puntoscanje: any;
  descuento: any;
  pcanje: any;

  constructor(private storage: Storage,) { 
    this.storage.get('Puntos').then((val) => {
      this.points = parseInt(val);
      //console.log('Your Name is', val);
    });
   }

  myFunction() {
    console.log(this.puntoscanje);
    if( this.puntoscanje > this.points){
      this.puntoscanje = this.points;
    }
      var PuntosDescto = 10 ;
      var calculo = ( this.puntoscanje / PuntosDescto).toFixed(2);
      this.descuento = calculo;        
  }

  ngOnInit() {
  }

}

HTML

<ion-header>
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Canje de Puntos</ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content padding>
  <form  #form="ngForm" (ngSubmit)="register(form)">
    <ion-grid>
      <ion-row justify-content-center>
        <ion-col align-self-center>
          <div padding class="form-inputs">
            <ion-item  >
                <ion-label position="stacked" style="text-align: center;">Puntos Acumulados</ion-label>
                <ion-input type="text" name="acumulados" [(ngModel)]="acumulados" value="{{points}}" readonly style="text-align: center;"></ion-input>
            </ion-item>

            <ion-item>
              <ion-label position="stacked" style="text-align: center;">Puntos a Canjear</ion-label>
              <ion-input type="number" inputmode="numeric" id="puntoscanje" name="puntoscanje" autofocus="true" [(ngModel)]="puntoscanje" style="text-align: center;" min="0" max="{{points}}" (ionChange)="myFunction()" ></ion-input>
            </ion-item>

            <ion-item>
              <ion-label position="stacked" style="text-align: center;">descuento</ion-label>
              <ion-input type="number" inputmode="numeric" id="descuento" name="descuento" [(ngModel)]="descuento" style="text-align: center;" max="{{points}}" ></ion-input>
            </ion-item>
            
            
          </div>
          <div style="padding-top:100px">
          <ion-button style="width:150px; height: 50px; margin: auto; " expand="block" (click)="Login()" >Canjear</ion-button>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    </form>
</ion-content>

And i need to set the value to Descuento field when the “puntoscanje” is set.
Im new to ionic but im trying my best.

Thanks in advance to everyone

Posts: 1

Participants: 1

Read full topic