ngx-mask

ngx-mask copied to clipboard

Problem: When using the following options and inserting e.g 0.5 of type number, the value gets truncated to 5 when inserted into the input.

thousandSeparator: '.',
decimalMarker: ','

<input type="text" formControlName="value" mask="separator" />

Findings: The separator mask doesn't seem to be working properly with decimal numbers smaller than 1 when populating the form. You are able to manually type decimal numbers where it seems to be working fine.

Hi, if typed 0.5 should be smaller than 1, then the . must be the decimalMarker and not the thousandSeparator when mask="separator" is used (verified with v. 8.1.7). In your setup you would need to type 0,5.

@efedorko: There is two different cases:

• The form get populated by the user e.g. the user types 0,5 (Works fine).
• In the other case, which is when the form is populated programmatically e.g via reactive forms. In this case the program tries to insert 0.5 (of type number) into the form which fails with the current setup (Doesn't work).

@Soren-Knudsen: I passed a decimal number via ngModel to this input and it worked fine. Can it be, that in your case, the input component effectively receives the number converted to a plain string (disregarding your decimalMarker)? I suspect when you pass 1.5 number you get 15. Could you please share a simplified setup (e.g. on stackblitz)?

@efedorko: I have created a stackbliz demonstrating the problem with Reactive Forms. I try to insert 0.5 programmatically and it gets truncated to 5 .

@Soren-Knudsen: adding decimalMarker="," to your example makes it work, see: stackblitz-fixed.

@efedorko: Nice! I think I found the issue. Please see the stackblitz. In my production code, I initialize NgxMaskModule as shown below and don't add mask="separator" and thousandSeparator="." to all inputs.

NgxMaskModule.forRoot({
    thousandSeparator: ".",
    decimalMarker: ","
})

The input field doesn't seem to pick up the default configuration (See value #1 vs value #2 in the stackblitz). If I add the thousandSeparator + decimalMarker to the input it seems to be working fine.

Is this by design or a bug?

Still no update on this issue?

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