Ionic4 currency mask reactive forms

I am looking for a live currency mask for Ionic4 type=angular to be implemented in a reactive form(s) i.e. as you type it automatically formats by adding the thousand separator.

I have used “angular2-text-mask”: “8.0.1” with “text-mask-addons”: “3.5.1” with success but it uses ngModel and template forms. Any solution for reactive forms or suggestions would be appreciated.

Ok, so I found a solution that works for Ionic 4 using pretty much any live mask including a customizable currency mask. It also works for reactive and template forms. If you are using ionic 4 install the angualr 2 text mask https://github.com/text-mask/text-mask/tree/master/angular2 and follow the instructions i.e:

  • npm i angular2-text-mask --save
  • then: import { TextMaskModule } from ‘angular2-text-mask’ into the module for the respective page(s);
  • If you are using the currency mask then install the text mask add-on: npm i text-mask-addons --save
  • You do not need to register this in a module, simply import into the page e.g. import createNumberMask from ‘text-mask-addons/dist/createNumberMask’
  • Here is the big deal - DON’T use ion-input simply use the input tag in the html
  • I found it neater to use bootstrap forms and avoid ion-lists , ion-items etc (in other words use normal html e.g:
<label for="lb">Bond/ Rental?</label> 
<input formControlName = 'bond' class="form-control" id = "lb" 
    [textMask]="{mask:numberMask}" type ="tel" />

The page component code for the currency mask was a variable:

numberMask = createNumberMask({ prefix:'', thousandsSeparatorSymbol: ',', allowDecimal: true, decimalSymbol: '.' });

Also in the code was the standard form - I used formbuilder e.g.

 this.housingForm = formBuilder.group({
      bond: ['' , Validators.compose([Validators.required])], 
      ......

I hope this helps anyone else.

2 Likes

Thank you Mr Bollocks :slight_smile:

Its hard for me because all my form was in Ion-input