Ionic: [(ngModel)] and (input) in ion-input

Ionic Framework ionic-v3
1

Look at this code, please:

<ion-input type="number" [(ngModel)]="data.quantity" (input)="readData(data)"></ion-input>

It first calls readData() and after that it updates data.quantity. In my case it is a problem, because in readData() I want the new value entered by the user, and now it has the old one (the previous value before it changed).

How can I invert that order? I mean first update data.quantity, and once updated, then call readData() with the new value entered by the user.

Thank you

Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS:
Node Version: v4.4.1
2 Likes
2

I’m not sure if there isn’t a better way but you could do the following:

<!-- template -->
<ion-input type="number" [value]="data.quantity" (input)="setQuantity($event.target.value)"></ion-input>

// ...
  setQuantity(value) {
    this.data.quantity = value;
    this.readData(this.data);
  }
// ...
2 Likes
3

I have changed the (input) event for (change) event, and now it works…

Thank you!

4

I know I’m a little late to the party but just wanted to say that if you need the value for some heavy operation like validation - it is possible to do that in a directive and use NgControl in it.
Check it out here.

1 Like