[SOLVED] Input currency mask - IONIC

Ionic Framework ionic-v3
1

Hello!

I need a help to input currency mask to Ionic 3.
Example, I’ll input type and digits in real number 0.00.

Thanks… :slight_smile:

2

Hi, @medeiraf

You can use angular2-text-mask in ionic 3

https://www.npmjs.com/package/angular2-text-mask

Thanks,

1 Like
3

Hi, @addwebsolution
Thanks for answer.
It’s work, but how to apply currency mask?

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
5

Whoa! :smile:
it’s work! Thaanks… :+1:

6

https://www.npmjs.com/package/angular2-text-mask

angular2-text-mask
Unfortunately, we are unable to support Ionic 2 ion-input at this point as it overrides the ControlValueAccessor that Text Mask requires to perform its job.

did u get it ?

1 Like
7

Yes, its understood.