0

I am trying to use the currency pipe on an ion-input element as follows.

<ion-input type="number" name="amount" 
 [ngModel]="myObject.amount | currency" 
 (ngModelChange)="myObject.amount = $event">
</ion-input>

When I use this one-way binding + event approach, the input field is blank on the UI. If I inspect element, I see the ng-reflect-model="$100" attribute value on the generated input element. If I change the type to text, however, I do see the rendered value of $100. 

<ion-input type="text" name="amount" 
 [ngModel]="myObject.amount | currency" 
 (ngModelChange)="myObject.amount = $event">
</ion-input>

The problem is now I lose the numeric keyboard if type="text" instead of type="number". Any ideas on how to make this work with showing the numeric keyboard?

I am using ionic-angular v3.9.2.

Jane Wayne
  • 8,205
  • 17
  • 75
  • 120

1 Answers1

0

You could try something like this,

<ion-input type="number" name="amount" 
 [ngModel]="myObject.amount"
 (change)="updateAmount($event.target.value)">
</ion-input>

and in the .ts

updateAmount(qp:number):void {
   this.formattedAmount = this.currencyPipe.transform(this.amount, 'USD');
   element.target.value = this.formattedAmount;
}
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • Where is `this.currencyPipe` coming from? Also, where is `element` coming from? Could you please give a more complete example for the `.ts` file? – Jane Wayne Oct 09 '18 at 02:38
  • https://forum.ionicframework.com/t/ion-input-with-ngmodel-and-pipe/50206/2 – Sajeetharan Oct 09 '18 at 02:40
  • both the examples will give you a better idea – Sajeetharan Oct 09 '18 at 02:40
  • Thanks, but the plnkr example doesn't work (it gets stuck in loading) and plus you're using `type=text` and I don't know if that's going to translate to ionic. The second example on that forum doesn't work either when `type=number`. – Jane Wayne Oct 09 '18 at 03:15