# Input mask with thousand separator ionic

**URL:** <https://forum.ionicframework.com/t/input-mask-with-thousand-separator-ionic/105190>\
**Category:** ionic-v3\
**Created:** [September 13, 2017, 6:42am UTC](https://forum.ionicframework.com/t/input-mask-with-thousand-separator-ionic/105190 "2017-09-13T06:42:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sampath](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sampath/32/137165_2.png) [@sampath](https://forum.ionicframework.com/u/sampath)\
**Post date:** [September 13, 2017, 6:42am UTC](https://forum.ionicframework.com/t/input-mask-with-thousand-separator-ionic/105190/1 "2017-09-13T06:42:15Z")

</div>

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](https://github.com/text-mask/text-mask/issues/634)

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

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 13, 2017, 7:50pm UTC](https://forum.ionicframework.com/t/input-mask-with-thousand-separator-ionic/105190/2 "2017-09-13T19:50:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sampath](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sampath/32/137165_2.png) [@sampath](https://forum.ionicframework.com/u/sampath)\
**Post date:** [September 14, 2017, 12:10am UTC](https://forum.ionicframework.com/t/input-mask-with-thousand-separator-ionic/105190/3 "2017-09-14T00:10:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SigmundFroyd](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sigmundfroyd/32/111604_2.png) [@SigmundFroyd](https://forum.ionicframework.com/u/SigmundFroyd)\
**Post date:** [September 14, 2017, 2:28am UTC](https://forum.ionicframework.com/t/input-mask-with-thousand-separator-ionic/105190/4 "2017-09-14T02:28:33Z")

</div>

`[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.

---

<div class="post-metadata">

**Author:** ![sampath](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sampath/32/137165_2.png) [@sampath](https://forum.ionicframework.com/u/sampath)\
**Post date:** [September 14, 2017, 2:34am UTC](https://forum.ionicframework.com/t/input-mask-with-thousand-separator-ionic/105190/5 "2017-09-14T02:34:25Z")

</div>

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.