Ion-input with a (change) event seems not to work as expected

Ionic Framework ionic-v3
1

I’m using <ion-input> to enter a time value. The HTML looks like this:

<ion-item>
  <ion-label fixed>Time:</ion-label>
    <ion-input type="time" [(ngModel)]='time' 
       (change)='onChangeTime($event.target.value)'>
    </ion-input>
</ion-item>

My typescript controller has a this.time and an call-back:

onChangeTime(data) : void {
  console.log("onChangeTime to time: " + this.time + ". Event data: " + data);        
}

If the type is text then onChangeTime() is called only after the item loses focus (and the content is modified). I’d expect the call-back get called with every letter/digit entered/removed.

If the type is time then onChangeTime() is never called!

I want to catch these changes to the input field in order to update other parts of the GUI. Is there something I overlook? Is there another workaround?

1 Like
2

Found a workaround by using another event call-back:
(input)='onInputTime($event.target.value)'

13 Likes
3

You must use input event

2 Likes
4

Very odd, since I added and removed this (input) handler, the (change) event handler also triggers with every character change …

@xr0master Thank you for the confirmation!

5 
<ion-item>
  <ion-label fixed>Time:</ion-label>
    <ion-input type="time" (ionInput)="runTimeChange($event)"></ion-input>
</ion-item>

getItems(ev: any) {
    let val = ev.target.value;
    //ToDo
}

if u want to get input value right after u set value u can use

<ion-item>
  <ion-label fixed>Time:</ion-label>
    <ion-input type="time" [(ngModel)]="runTimeChange(searchTerm)"></ion-input>
</ion-item>

runTimeChange(searchTerm) {
   //ToDo
}
4 Likes
6

<ion-input [(ngmodel)]="quantity" (ngModelChange) ="doSometing(quantity)"></ion-input>

3 Likes