Feature request: Configure thousand separator character

[strille]

This directive works great. However, it would be nice to be able to configure the separator character, since many European countries use a space instead of a comma

[morgenes]

I would love to see this feature as well!

[helgadeville]

Hi,
I have redesigned a piece of this directive to make it accept locale thousands separator and decimal separator character. There are new config options: thousandsSeparator, decimalSeparator; also autoFormat option and keepThousandsOnInput have been added.

If anyone interested - please contact me at: [email protected]. In the meantime I will try to fork this project and push in new version.

[paulyoder]

@helgadeville I would love to see your pull request. A few months ago I spent a couple hours trying to implement this feature but it got too complex, and I never found a solution that I liked.

[helgadeville]

Let's hope that I have created a good pull request :)

Greetings.

[helgadeville]

Hi Paul,

thanks for Your interest. I have created a pull request from my forked
project.
Please do check my code, as I have rewritten a large piece of Your
directive.
To keep it short:

• default options are now initialized with decimalSeparator and
  thousandsSeparator, which are taken from .toLocaleString() JS function
  with properly formatted numbers.
  those options can be overridden
• the "makeMaxDecimals" function has been changed to both validate for
  proper format with thousands separator and for proper number of decimal
  digits;
  this required changing both regexes
• the "makeMaxDigits" function has been changed to use standard
  char-by-char parsing and digits counting - I could not think of an
  appropriate regex here
• "toStandard" function has been added before isNumber() or isFinite()
  function is invoked; it will replace thousands separator with nothing
  and decimal separator
  with a dot, to provide proper input for those functions
• auto formatting on input blur has been made optional
• also deformatting on input focus has been made optional.

I have done some testing, but this code should be considered "hot".

Hope it helps - cause Your directive is really a good idea :)

Olga

P.S. I use it with German locale setting

W dniu 13.01.2015, 16:47, Paul Yoder pisze:

@helgadeville https://github.com/helgadeville I would love to see
your pull request. A few months ago I spent a couple hours trying to
implement this feature but it got too complex, and I never found a
solution that I liked.

—
Reply to this email directly or view it on GitHub
#6 (comment).

[helgadeville]

My branch version will go to our production in one week from now. The testers are satisfied; however, the testing still continues. Greetingz.

[fabiusss]

+1

[stollr]

A few months ago I spent a couple hours trying to implement this feature but it got too complex, and I never found a solution that I liked.

@paulyoder Another solution would be to use Intl.NumberFormat which is supported by latest browsers and offers a build-in formatter.

Quoted from Mozilla doc:

var number = 123456.789;

// German uses comma as decimal separator and period for thousands
console.log(new Intl.NumberFormat('de-DE').format(number));
// → 123.456,789

For older brosers, you can fallback to your implementation ;-)

[uguryilmaz]

hi, are you planning to add localization support for this? this is the best working example i have ever found. but i can not use if it doesnt support localization. (. for thousand seperator , for decimal seperator)

[helgadeville]

Hi,
as mentioned above - the localization for thousand separator and decimal separator should work "out of the box". Those separators are gained by the application by using "toLocaleString()" JS function. You may override them by setting own decimal / thousand separator in configuration.
If this does not answer your question - then perhaps I have not understood Your question correctly, I am sorry.

Greetingz

[uguryilmaz]

hi, no you understand my question correctly. i just couldnt find where to configure thousand and decimal seperators. i analyzed the code but couldnt find it. if you have time could you please prepare a plunker to show that customizing of thousand and decimal seperator. i will be very happy if you can do so.. thanks..

[helgadeville]

Assuming that "app" object is Your angular application definition, see the code below.
Please note, that the "preventInvalidInput" etc. are not required :) I just put them here to show
other config options.

app.config([ 'fcsaNumberConfigProvider', function(fcsaNumberConfigProvider) {
fcsaNumberConfigProvider.setDefaultOptions({
preventInvalidInput : false, // this is just example
autoFormat : true, // another example
keepThousandsOnInput : false, // also example
decimalSeparator : ',',
thousandsSeparator : '.',
});
} ]);

[uguryilmaz]

thank you so much for your interest. i will try it, but when i look at fcsaNumber.js file, i couldnt see these variables that you mentioned. am i looking wrong file? or wrong branch? which file will i use in my project, in master branch src/fcsaNumber.js or thousands seperator branch src/fcsaNumber.js?

[helgadeville]

blockquote {padding-left: 1ex; margin: 0px 0px 0px 0.8ex; border-left: #cccccc 1px solid;} p {margin: 0px;padding: 0px;}
I am not sure which branch you check out.
 
This is the copy that should be in my branch.
 
Olga
 
 
Dnia Wtorek, 16 Czerwca 2015 12:09 Uğur YILMAZ [email protected] napisa³(a)

thank you so much for your interest. i will try it, but when i look at fcsaNumber.js file, i couldnt see these variables that you mentioned. am i looking wrong file? or wrong branch? which file will i use in my project, in master branch src/fcsaNumber.js or thousands seperator branch src/fcsaNumber.js?
—Reply to this email directly or view it on GitHub.
 

 

[helgadeville]

blockquote {padding-left: 1ex; margin: 0px 0px 0px 0.8ex; border-left: #cccccc 1px solid;} p {margin: 0px;padding: 0px;}
I am not sure if I attached the file.
 
Olga
 
 
Dnia Wtorek, 16 Czerwca 2015 12:09 Uğur YILMAZ [email protected] napisał(a)

thank you so much for your interest. i will try it, but when i look at fcsaNumber.js file, i couldnt see these variables that you mentioned. am i looking wrong file? or wrong branch? which file will i use in my project, in master branch src/fcsaNumber.js or thousands seperator branch src/fcsaNumber.js?
—Reply to this email directly or view it on GitHub.
 

 

[uguryilmaz]

there is two branches:

i want to use thousansdSeperator branch, but in description it say still incomplete so i couldnt be sure to use it. but if you say that i can use this branch, i will use it.

[helgadeville]

blockquote {padding-left: 1ex; margin: 0px 0px 0px 0.8ex; border-left: #cccccc 1px solid;} p {margin: 0px;padding: 0px;}
Hi,
 
please use another address in github:
 
https://github.com/helgadeville/angular-fcsa-number
 
There is only one branch there, like in the pic.
 
Olga
 
 
 
 
 
Dnia Wtorek, 16 Czerwca 2015 14:44 Uğur YILMAZ [email protected] napisał(a)

there is two branches:
i want to use thousansdSeperator branch, but in description it say still incomplete so i couldnt be sure to use it. but if you say that i can use this branch, i will use it.

—Reply to this email directly or view it on GitHub.
 

 

[Shawful]

Is this branch working (thousandsSeparator)?