Ion-input with ngModel and pipe

Ionic Framework ionic-v3
1

I would like to know which is the best approach to get a formated ion-input with ngModel. I want something like this:

<ion-input [(ngModel)]="quantity | percentage"></ion-input>

Of course it does not work, but I think it shows what I want: the user see, e.g 10%, and if he writes 5 the ngModel bind to quantity the value 0.05.

And same happens with currency or other pipes… what is the best approach for it?

Thank you

2

You could try something like this:

<ion-input [ngModel]="qpercent" (change)="updateQuantity($event.target.value)"></ion-input>

quantity: number;
qpercent: string;

constructor() {
  this.updateQuantity(0);
}

updateQuantity(qp:number):void {
  this.quantity = qp / 100;
  this.qpercent = qp + '%';
}
3

Maybe it is not the smartest way in the world… but it works :slight_smile:

The only problem is if I want to show the numeric keyboard, I cannot use type=“number”, because we are binding now to a string field (qpercent). How can I show numeric keyboard to enter quantity?

Thank you

4

I suppose you could have qpercent be quantity * 100 (without the ‘%’ sign), make the input field of type ‘number’, and then display the ‘%’ separately as a label to the right of the input field.

5

You can use <input pattern="\d*" type="text" /> to get the numeric keyboard