Getting ion input value on typing

Ionic Framework
1

i want to get values on ion input and calculate the total based on the input value. the total must change if there is any change in the input values on the ion-input

<ion-input [(ngModel)]=“info.collectedamt3” name=“collectedamt”
type=“text” >
<ion-input [(ngModel)]=“info.collectedamt2” name=“collectedamt”
type=“text” >
<ion-input [(ngModel)]=“info.total” name=“collectedamt”
type=“text” >

i want to display total based on the 1st two input values

a little help is greatly needed

thankyou

2

Hi @MOHANTHANGARAJ

Try this code it works properly as per your requirement:
home.html

<ion-input [(ngModel)]=“info.collectedamt3” (input)=“firstinput($event)” name=“collectedamt”

type=“number” ></ion-input>

<ion-input [(ngModel)]=“info.collectedamt2” (input)="secondinput($event)"name=“collectedamt”

type=“text” ></ion-input>

<ion-input [(ngModel)]=“info.total” name=“collectedamt”

type=“number” ></ion-input>

home.ts

firstinput(event){
   
    this.info["collectedamt3"]=event.target.value
   
    let collectedamt2=this.info["collectedamt2"]?parseFloat(this.info["collectedamt2"]):0
    let collectedamt3=this.info["collectedamt3"]?parseFloat(this.info["collectedamt3"]):0
    this.info["total"]=collectedamt2+collectedamt3;
  }
  secondinput(event){
   
    this.info["collectedamt2"]=event.target.value
   
    let collectedamt2=this.info["collectedamt2"]?parseFloat(this.info["collectedamt2"]):0
    let collectedamt3=this.info["collectedamt3"]?parseFloat(this.info["collectedamt3"]):0
    this.info["total"]=collectedamt2+collectedamt3;
  }

Here I’ve used (input) event it will give the input values if any change made in ion-input.

3

Thank You @addwebsolution it works fine but the function gets called on every value change (i.e when am entering 5602 the function gets called 4 times and gives me four values),can’t i be able to check the total only after i’ve entered the whole amount?

4

@MOHANTHANGARAJ
You have mentioned in the question that total must be changed if there is any change in the input values that’s why I’ve suggested (input) event if you want total after entering the whole amount and exit from that input box then u can use (ionBlur) event instead of (input) event.
It works fine in that case.
Hope it helps!!

1 Like
5

Thank You @addwebsolution that worked perfect

1 Like