[SOLVED] Input currency mask - IONIC

Ionic Framework ionic-v3
4

Hi. I dealed with the Angular currency pipe and finally ended making my own input component and using the number pipe like:

| number:'4.2-2'

I had many problems getting the right values.

To use it on a ion-input perhaps your best option is to make your own pipe to format the currency values, something like:

<ion-input       
      type="tel"
      [ngModel]="currencyValue | currencyFormat:applyFormat"
      (ngModelChange)="updateData($event)"
      (ionBlur)="applyFormat = true;"
      (ionFocus)="applyFormat = false;"></ion-input>

Here you’re using single binding so you can apply any custom pipes to format your values.
Take a look at https://stackoverflow.com/questions/34990102/angular2-data-binding-for-custom-reusable-component for the updateData() function.
Also try:
(ngModelChange)="currencyValue=$event.target.value"
or
(ngModelChange)="currencyValue=$event"

Hope it helps. Best regards.

2 Likes