ngx-mask

ngx-mask copied to clipboard

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

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 And then display it correctly

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

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

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

Does using decimalMarker="," fix your issue?

see also https://github.com/JsDaddy/ngx-mask/issues/1009#issuecomment-1291920468, might help?

@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