🐞 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"

It might be related to this https://github.com/JsDaddy/ngx-mask/issues/1015

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

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

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

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" ?

@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 https://github.com/JsDaddy/ngx-mask/pull/1052 turns out (in the meantime we're using our fork https://github.com/kwsoft/ngx-mask)

@mrpia Your request merged. Thank you for contributing.