ngx-mask icon indicating copy to clipboard operation
ngx-mask copied to clipboard

separator mask creates wrong input value for FormControl of type number when exponential format numbers are used

Open samyrsaru opened this issue 9 months ago • 0 comments

🐞 bug report

Is this a regression?

Similar documented issue: https://github.com/JsDaddy/ngx-mask/issues/922 Resolution: Closed with fix https://github.com/JsDaddy/ngx-mask/commit/33deef3a1184b558542e92558699f78aec6f1424

I assume it worked for awhile or maybe it wasn't tested for the use case of a FormControl with type number. My thought was that numberToString doesn't get called anymore.

Description

binding the input with "separator" mask to a FormControl with number as value type breaks the input value

🔬 Minimal Reproduction

  • bind the input to a FormControl of type input
  • set the FormControl to a value that is written in exponential format as a number
  • setting the control to 0.0000007 would make my input value contain "77" from (7e-7) instead of "0.0000007"

Demo: https://stackblitz.com/edit/angular-ivy-mask-aadzsytl?file=src%2Fapp%2Fapp.component.ts

I attach 2 cases: a number based control and a string based one. I am interested in the first.

.ts


myNumber = new FormControl(0.0000007);
myNumberString = new FormControl('0.0000007');

.html

<input type="text" mask="separator" inputmode="numeric" [ngModel]="myNumber" />

<input
  type="text"
  mask="separator"
  inputmode="numeric"
  [ngModel]="myNumberString"
/>

🌍 Your Environment

"@angular/cli": "^17.3.8", "ngx-mask": "^19.0.6",

samyrsaru avatar Jan 16 '25 16:01 samyrsaru