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
Its hard for me because all my form was in Ion-input