diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts index 8a11bfc1..466d95a8 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts @@ -555,10 +555,11 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida // eslint-disable-next-line no-param-reassign inputValue = this._maskService.numberToString(inputValue); if (!Array.isArray(this.decimalMarker)) { + const localeDecimalMarker = this._currentLocaleDecimalMarker(); // eslint-disable-next-line no-param-reassign inputValue = - this.decimalMarker !== '.' - ? inputValue.replace('.', this.decimalMarker) + this.decimalMarker !== localeDecimalMarker + ? inputValue.replace(localeDecimalMarker, this.decimalMarker) : inputValue; } this._maskService.isNumberValue = true; @@ -713,4 +714,8 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida }); } } + + private _currentLocaleDecimalMarker(): string { + return (1.1).toLocaleString().substring(1, 2); + } } diff --git a/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts b/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts new file mode 100644 index 00000000..e55c4900 --- /dev/null +++ b/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts @@ -0,0 +1,65 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { LOCALE_ID } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; +import { TestMaskComponent } from './utils/test-component.component'; +import { equal, typeTest } from './utils/test-functions.component'; +import { provideNgxMask } from '../lib/ngx-mask.providers'; +import { NgxMaskDirective } from '../lib/ngx-mask.directive'; + +// FR locale uses comma as decimal marker +describe('Separator: Mask with FR locale', () => { + let fixture: ComponentFixture; + let component: TestMaskComponent; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestMaskComponent], + imports: [ReactiveFormsModule, NgxMaskDirective], + providers: [provideNgxMask(), { provide: LOCALE_ID, useValue: 'fr' }], + }); + fixture = TestBed.createComponent(TestMaskComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('Should work right when reset decimalMarker', () => { + component.mask = 'separator.2'; + component.decimalMarker = '.'; + equal('1000000.00', '1 000 000.00', fixture); + }); + + it('separator precision 2 with thousandSeparator (.) decimalMarker (,) for 12345.67', () => { + component.mask = 'separator.2'; + component.thousandSeparator = ','; + component.decimalMarker = '.'; + equal('12,345.67', '12,345.67', fixture); + }); + + it('separator precision 2 with thousandSeparator (.) decimalMarker (,) for 12345.67', () => { + component.mask = 'separator.2'; + component.thousandSeparator = ','; + component.decimalMarker = '.'; + equal('12345.67', '12,345.67', fixture); + }); + + it('check formControl value to be number when decimalMarker is dot', () => { + component.mask = 'separator.2'; + component.thousandSeparator = ' '; + component.decimalMarker = '.'; + + typeTest('12 345.67', fixture); + expect(component.form.value).toBe('12345.67'); + }); + + it('check formControl value to be number when decimalMarker is array', () => { + component.mask = 'separator.2'; + component.thousandSeparator = ' '; + component.decimalMarker = ['.', ',']; + + typeTest('12 345,67', fixture); + expect(component.form.value).toBe('12345.67'); + + typeTest('123 456.78', fixture); + expect(component.form.value).toBe('123456.78'); + }); +});