When I use mask="delimiter.2" and delimiter="." default shows with comma. Angular 13

[zsaidov]

🐞 bug report

Description

I used a mask like this:

<input autocomplete="off" type="text" decimalMarker="." mask="separator.2">

add data via reactive forms:

    formControl.setValue(400.25);

🔥 Exception or Error

shows like this:

400.25 -> 400,2
255.43 -> 255,4

Also write text after the number will remove those numbers

🌍 Your Environment

Angular Version:

    "@angular/core": "^13.3.7",
    "@angular/forms": "^13.3.7",
    "ngx-mask": "^13.1.14",

Everything works fine in this version.

"ngx-mask": "^12.0.0"

[gabrielgagne]

It might be related to this
#1015

Where maskService.numberToString converts using with the browser's local instead of the specified configuration for decimal and thousand separators

[mrpia]

this fix might help, this was committed after the upgrade to angular 14

could someone please try to release a patch for angular 13 version?

UPDATE: commit doesn't help

[mrpia]

we have a possible fix in our fork in our v13-hotfix branch:

• we cherry-picked this commit from original ngx-mask's develop branch
• see our extra fix for browser locale's decimal separator not matching the ngx-mask decimalMarker setting

please have a look, since our issue isn't exactly as the one described here

our problem was:

• browser locale german, uses decimal marker , (comma)
• input field with ngx-mask and decimalMarker="." mask="separator.2"
• form initialized with 12.34 value
• shows as 12.3 instead of 12.34

once all good and happy with our own software, we'll try to find the time to submit a PR here

so far didn't find a way to mock brower locale in the unit tests, but added a showcase to reproduce the bug (or check that it is fixed)

note: for now that's all in our fork's v13-hotfix branch, but we'll upgrade to angular 14 at some point, so we'll probably have something similar in develop branch

[StephaneVa]

Hello,

Same report here with 'separator', the following use case worked in v12 but fails in v13 & v14

When user's browser language is in 'fr'
And angular component has public value = 1234.56;
And angular template has :

input: <input mask="separator.2" [(ngModel)]="value"><br/>
pipe: {{value | mask:'separator.2'}}

Then browser should display:

input: 1 234.56
pipe: 1 234.56 

but since v13, the input value in browser is 1 234,56.
The pipe is still OK.

It's maybe due to https://github.com/JsDaddy/ngx-mask/blob/develop/projects/ngx-mask-lib/src/lib/mask.service.ts#L246 since in those browser Number(1234.56).toLocaleString('fullwide', {useGrouping: false, maximumFractionDigits: 20, }) returns "1234,56"

Should 'fullwide' could be replaced by 'en-US' instead, since Number(1234.56).toLocaleString('en-US', {useGrouping: false, maximumFractionDigits: 20, }) returns "1234.56" ?

[mrpia]

@zsaidov: issue is present since angular 13, and is also there for angular 14 (develop branch has upgraded), can you please update the title so it reflect that?

@StephaneVa: suggestion to use en-US would probably introduce a breaking change, as it would make MaskService.numberToString always return a value formatted with . as decimal marker (but not sure the current implementation using fullwide is the right one, since it doesn't use specified decimalMarker? unless that method is just used internally?)

let's see how #1052 turns out (in the meantime we're using our fork https://github.com/kwsoft/ngx-mask)

[NepipenkoIgor]

@mrpia Your request merged. Thank you for contributing.