fix(mask): bug if decimalMarker not locale default

note: manually tested with added showcase "Decimal separator with existing value" to test: set browser locale to German (so decimal marker defaults to ',') before fix: 1234.56 shows as 1234.5 after fix: 1234.56 shows as 1234.56 if someone finds a way to mock the locale, I'll gladly add a unit test for that kept the fix to the minimum, no refactoring
kwsoft · Oct 27, 2022 · 9714609 · 9714609
1 parent 2aa4752
commit 9714609
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 2 deletions.
diff --git a/projects/ngx-mask-lib/src/lib/mask.directive.ts b/projects/ngx-mask-lib/src/lib/mask.directive.ts
@@ -527,13 +527,15 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
 			// eslint-disable-next-line no-param-reassign
 			inputValue = this._maskService.numberToString(inputValue);
 			if (!Array.isArray(this.decimalMarker)) {
+				const localeDecimalMarker = (1.1).toLocaleString().substring(1, 2);
 				// eslint-disable-next-line no-param-reassign
 				inputValue =
-					this.decimalMarker !== '.' ? inputValue.replace('.', this.decimalMarker) : inputValue;
+					this.decimalMarker !== localeDecimalMarker
+						? inputValue.replace(localeDecimalMarker, this.decimalMarker)
+						: inputValue;
 			}
 			this._maskService.isNumberValue = true;
 		}
-
 		if (typeof inputValue !== 'string') {
 			// eslint-disable-next-line no-param-reassign
 			inputValue = '';

diff --git a/src/app/showcase/showcase.component.html b/src/app/showcase/showcase.component.html
@@ -15,6 +15,57 @@
 	</div>
 </div>
 
+<div class="container">
+	<div class="row">
+		<div class="col-12">
+			<div class="mat-card-wr">
+				<mat-card>
+					<mat-card-header>
+						<mat-card-title>Decimal separator with existing value</mat-card-title>
+						<mat-card-subtitle></mat-card-subtitle>
+					</mat-card-header>
+					<mat-card-content>
+						<div class="flex-row">
+							<div class="flex-cell-padding">
+								<mat-form-field>
+									<input
+										matInput
+										placeholder="Separator"
+										[dropSpecialCharacters]="true"
+										mask="separator.2"
+                    decimalMarker="."
+										[formControl]="initializedDecimalSeparatorForm"
+										[(ngModel)]="initializedDecimalSeparatorFormModel"
+									/>
+									<mat-hint><b>Mask: </b>separator.2, decimalMarker '.'</mat-hint>
+								</mat-form-field>
+							</div>
+							<div class="flex-cell">
+								<p>
+									<b>FormControl:</b>
+									{{
+										initializedDecimalSeparatorForm.value
+											? initializedDecimalSeparatorForm.value
+											: 'Empty'
+									}}
+								</p>
+								<p>
+									<b>NgModel:</b>
+									{{
+										initializedDecimalSeparatorFormModel
+											? initializedDecimalSeparatorFormModel
+											: 'Empty'
+									}}
+								</p>
+							</div>
+						</div>
+					</mat-card-content>
+				</mat-card>
+			</div>
+		</div>
+	</div>
+</div>
+
 <div class="container">
 	<div class="row">
 		<div class="col-12">

diff --git a/src/app/showcase/showcase.component.ts b/src/app/showcase/showcase.component.ts
@@ -51,6 +51,8 @@ export class ShowcaseComponent {
 
 	public emptyMaskForm: FormControl;
 
+	public initializedDecimalSeparatorForm: FormControl;
+
 	public separatorForm: FormControl;
 
 	public percent: FormControl;
@@ -113,6 +115,8 @@ export class ShowcaseComponent {
 
 	public separatorFormModel!: SN;
 
+	public initializedDecimalSeparatorFormModel = 1234.56;
+
 	public separatorPrecisionSeparatorFormModel!: SN;
 
 	public separatorZeroPrecisionSeparatorFormModel!: SN;
@@ -184,6 +188,7 @@ export class ShowcaseComponent {
 		this.repeatForm = new FormControl('');
 		this.emptyMaskForm = new FormControl('');
 		this.separatorForm = new FormControl('');
+		this.initializedDecimalSeparatorForm = new FormControl('');
 		this.separatorPrecisionSeparatorForm = new FormControl('');
 		this.separatorZeroPrecisionSeparatorForm = new FormControl('');
 		this.dotSeparatorForm = new FormControl('');