Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Thousand Separator doesn't work correctly with some locales #1015

Closed
igor-chernetsky opened this issue Jun 10, 2022 · 4 comments
Closed

Thousand Separator doesn't work correctly with some locales #1015

igor-chernetsky opened this issue Jun 10, 2022 · 4 comments
Labels

Comments

@igor-chernetsky
Copy link

Description

Looks like separator doesn't work for browsers with locale, where decimal delimiter is , it just show numbers like 1.22 as 122
mask="separator" thousandSeparator="."

馃敩 Minimal Reproduction

the quick fix it just set up static locale

	public numberToString(value: number | string): string {
		if (!value && value !== 0) {
			return String(value);
		}
		return Number(value).toLocaleString('**en-US**', {
			useGrouping: false,
			maximumFractionDigits: 20,
		});
	}

but probably additional attribute like [locale-separator] would be useful

@gabrielgagne
Copy link

gabrielgagne commented Jun 14, 2022

Was just going to open issue for this, but I have the exact same problem.
In our app, we always use ',' for thousandSeparator and '.' for decimal separator (I do have them specified in ngx-mask cfg)

But the piece of code from the OP messes up our number inputs for user that dont have a local where these are the default (like fr-CA, that has '(space)' for thousand separator and ',' for decimalSeparator)

Let's say we have the string '7.5' for our data that we want to display as 7.50 (separator.2)
It use to be (in version 12.xxx) that the mask directive would leave our value intact
image
And then display it correctly

But now in v13+, it tries to convert it because of the 'separator.2'
image

It calls maskService.numberToString (the piece of code OP linked) and transforms '7.5' to '7,5', which ends up as '75' in the input
image

So we would need for this transformation to stop happening, or numberToString to take into account the specified thousandSeparator and decimalSeparator.

This can be tested by settings other languages in chrome (like french (france) or french (canada) chrome://settings/?search=lang

@daniel-seitz
Copy link

Does using decimalMarker="," fix your issue?

@mrpia
Copy link
Contributor

mrpia commented Oct 26, 2022

see also #1009 (comment), might help?

@andriikamaldinov1
Copy link
Collaborator

@igor-chernetsky Thanks for your using Ngx-Mask. Please update to latest version.
It example, all work as expected - https://stackblitz.com/edit/angular-7dxc1z?file=src%2Fmain.ts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants