Input mask with thousand separator ionic

Ionic Framework ionic-v3
1

Hi,

I need a thousand separator input mask directive or else with Ionic 3 app. I have tried 2 directives. But none of them were working. Do you know working directive for that?

e.g. 50,000

html

<ion-input type="tel" [ngModel]="data?.budget" formControlName="budget" (ngModelChange)="data.budget=$event"></ion-input>

I have logged issues on Git. please see that too:

text-mask : https://github.com/text-mask/text-mask/issues/634

ng2-currency-mask : https://github.com/cesarrew/ng2-currency-mask/issues/18#issuecomment-329053852

2

Please choose only one of the three binding methods you have here, so they won’t fight with one another.

3

I would be great if you can explain bit more about your sentence above?

4

[ngModel]="data?.budget", formControlName="budget",
and (ngModelChange)="data.budget=$event" are 3 different ways of binding to data, and having 3 is not only overkill but as @rapropos alluded to are likely to step on the other’s toes.

5

I need it since easy data validation (i.e. formControlName="budget". I can do it within ts file) and I need to use 2-way data binding also due to a complexity of the input validation. This is my actual code for the event change (ngModelChange)="data.budget=$event;calculateContingency()". If you know how to do all those using reactive form method it would be great to know about it too. Thanks.