2

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 Issue

ng2-currency-mask Issue

Sampath
  • 63,341
  • 64
  • 307
  • 441
  • Can't you use pipe? – The Hungry Dictator Sep 13 '17 at 05:09
  • 2
    This is for the `input box`. We cannot use `pipe` with input fields. It is only formatting the already existing text. I need to format it while the user entering the `numeric` content on the `input` box. @TheDictator – Sampath Sep 13 '17 at 05:11
  • 1
    I wrote a quick version for ionic of my formatting directive. Would you like to have a look or you prefer a library? – Vega Sep 13 '17 at 09:28
  • It will be an awesome news. You know that no one can do a simple 1000 separator formatting on an `input box` using most famous `Ionic` framework at the moment. Which is really sorry for the community. I think this must be a default directive out of the box in the Ionic framework. But I know it is an open source project. So if you can do that it would be highly appreciated by the Ionic community. We really like an `npm` package. @Vega – Sampath Sep 13 '17 at 09:34
  • But `npm` package is tedious task for you now please provide the `directive` itself. Thanks. @Vega – Sampath Sep 13 '17 at 09:36
  • 1
    Ah, I didn't know it was so difficult to find one, but now that I know I am not sure mine is good enough... I adapted it from one I used in an olden project, it needs some adaptation for the regexp. Take a look, but don't be 'mad' at me if it's deceving :( https://stackblitz.com/edit/ionic-5mdcm8?file=app%2Fapp.html – Vega Sep 13 '17 at 11:25
  • Oh.. It seems great :) Can you put that as an answer with more details. Thank you so much @Vega – Sampath Sep 13 '17 at 12:01
  • And it would be great if you can create a `directive` of this and show it inside the `home.html` page. @Vega – Sampath Sep 13 '17 at 12:06
  • @Sampath, I had some issues when making a directive so took a workaround to show you, but will work on it! And thank you! :) – Vega Sep 13 '17 at 12:44

1 Answers1

2

Here is my version of formatting that works on ionic too.

Typescript:

format(valString) {
    if (!valString) {
        return '';
    }
    let val = valString.toString();
    const parts = this.unFormat(val).split(this.DECIMAL_SEPARATOR);
    return parts[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, this.GROUP_SEPARATOR) + (!parts[1] ? '' : this.DECIMAL_SEPARATOR + parts[1]);
};

unFormat(val) {
    if (!val) {
        return '';
    }
    val = val.replace(/^0+/, '');

    if (this.GROUP_SEPARATOR === ',') {
        return val.replace(/,/g, '');
    } else {
        return val.replace(/\./g, '');
    }
};

HTML:

<ion-input [(ngModel)]="budget"  pattern="^[$\-\s]*[\d\,]*?([\.]\d{0,10})?\s*$"
style="border:1px solid black" #myBudget="ngModel" (input)="budget = format(budget)"></ion-input>
<p style="color:red" *ngIf="myBudget.errors && myBudget.errors?.pattern">Enter numbers only</p>

It need some improvements in error management and currency addition (it accepts leading '$' sign). I set the regexp to accept numbers with 10 decimals.

DEMO

If you wish no decimals and only numeric input, this DEMO shows how.

Vega
  • 27,856
  • 27
  • 95
  • 103
  • Actually, my situation is very simple. I just need to format it like this: `50,000` `No decimals` and `no currency`.Just 1000 separators only. Hope I can do it no? Can you show that sample also? I'm not good at all about `Regex`.Hope you'll help here :) – Sampath Sep 13 '17 at 13:04
  • 1
    It seems really cool! Hope you'll improve this as an Angular `directive` and will release it as an `MIT` project for the Ionic community.Thank you so much and Good Luck! :) – Sampath Sep 13 '17 at 13:25
  • 1
    I am not familiar with ionic at all (this was my first attempt) but will do my best to setup the directive. Thank you for the encouragements, I really appreciate it:) – Vega Sep 13 '17 at 13:28
  • Yes, This is really impressive. There is not that much difference between Ionic and angular. Actually Ionic is a child of Angular father :) So it must be very easy to learn Ionic for you since you're an Angular master. If you need any support about ionic please let me know. Actually, we need this kind of simple use case directives when we develop the mobile apps. Because the size of the module is matters when we consider the performance of mobile apps.So your directive will be a gem for the Ionic community :) – Sampath Sep 13 '17 at 13:55