From 9ae410284e61297b075d0a630494d863c551eeb0 Mon Sep 17 00:00:00 2001 From: andriikamaldinov1 Date: Fri, 20 Dec 2024 12:16:27 +0200 Subject: [PATCH] fix(ref: no-ref): fix issues --- CHANGELOG.md | 3 +- USAGE.md | 4 +- .../src/lib/ngx-mask.directive.ts | 26 ++++++++ .../ngx-mask-lib/src/lib/ngx-mask.service.ts | 1 + .../src/test/allow-negative-numbers.spec.ts | 2 +- .../ngx-mask-lib/src/test/separator.spec.ts | 65 ++++++++++++++++++- 6 files changed, 95 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 20c64997..23168c07 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,12 +3,13 @@ ### Fix - Fix ([#1481](https://github.com/JsDaddy/ngx-mask/issues/1481)) +- Fix ([#1411](https://github.com/JsDaddy/ngx-mask/issues/1411)) # 19.0.4(2024-12-13) ### Feature -- add input property instantPrefix +- add input property instantPrefix ### Fix diff --git a/USAGE.md b/USAGE.md index 9e0932f8..cfa80741 100644 --- a/USAGE.md +++ b/USAGE.md @@ -132,7 +132,6 @@ pattern = { You can add prefix to you masked value - #### Usage ```html @@ -150,10 +149,9 @@ When set to false, the prefix only becomes visible when a value is present in th ```html - + ``` - ### suffix (string) You can add suffix to you masked value 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 6cb07c9f..0a8591ac 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts @@ -161,6 +161,32 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida } if (thousandSeparator) { this._maskService.thousandSeparator = thousandSeparator.currentValue; + if (thousandSeparator.previousValue && thousandSeparator.currentValue) { + const previousDecimalMarker = this._maskService.decimalMarker; + + if (thousandSeparator.currentValue === this._maskService.decimalMarker) { + this._maskService.decimalMarker = + thousandSeparator.currentValue === MaskExpression.COMMA + ? MaskExpression.DOT + : MaskExpression.COMMA; + } + if (this._maskService.dropSpecialCharacters === true) { + this._maskService.specialCharacters = this._config.specialCharacters; + } + if ( + typeof previousDecimalMarker === 'string' && + typeof this._maskService.decimalMarker === 'string' + ) { + this._inputValue.set( + this._inputValue() + .split(thousandSeparator.previousValue) + .join('') + .replace(previousDecimalMarker, this._maskService.decimalMarker) + ); + this._maskService.actualValue = this._inputValue(); + } + this._maskService.writingValue = true; + } } if (decimalMarker) { this._maskService.decimalMarker = decimalMarker.currentValue; diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts index 064e88a1..bd95795c 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts @@ -611,6 +611,7 @@ export class NgxMaskService extends NgxMaskApplierService { ) ) : ''; + this.writingValue = false; this.maskChanged = false; return; } diff --git a/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts b/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts index 5eb8bf00..9a89808b 100644 --- a/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts +++ b/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts @@ -41,8 +41,8 @@ describe('Directive: Mask (Allow negative numbers)', () => { component.dropSpecialCharacters.set(true); component.form.setValue(-123456); - equal('-123456.00', '-123,456.00', fixture); expect(component.form.value).toBe(-123456); + equal('-123456.00', '-123,456.00', fixture); }); it('allowNegativeNumber to mask', () => { diff --git a/projects/ngx-mask-lib/src/test/separator.spec.ts b/projects/ngx-mask-lib/src/test/separator.spec.ts index cc629b5f..7707786a 100644 --- a/projects/ngx-mask-lib/src/test/separator.spec.ts +++ b/projects/ngx-mask-lib/src/test/separator.spec.ts @@ -4,7 +4,7 @@ import { By } from '@angular/platform-browser'; import type { DebugElement } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; -import { equal, Paste, typeTest } from './utils/test-functions.component'; +import { equal, Paste, Type, typeTest } from './utils/test-functions.component'; import { initialConfig, NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Separator: Mask', () => { @@ -1902,4 +1902,67 @@ describe('Separator: Mask', () => { expect(component.form.dirty).toBe(false); expect(component.form.pristine).toBe(true); }); + + it('should show correct value in model after changing thousandSeparator', () => { + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set(','); + + const inputElement = fixture.nativeElement.querySelector('input'); + inputElement.value = '100000.00'; + inputElement.dispatchEvent(new Event('input')); + fixture.detectChanges(); + + expect(component.form.value).toBe('100000.00'); + + component.thousandSeparator.set('.'); + fixture.detectChanges(); + + expect(component.form.value).toBe('100000.00'); + + component.thousandSeparator.set('-'); + fixture.detectChanges(); + + expect(component.form.value).toBe('100000.00'); + + component.thousandSeparator.set(','); + fixture.detectChanges(); + + expect(component.form.value).toBe('100000.00'); + }); + + it('should show correct value in input after changing thousandSeparator', () => { + const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); + const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; + spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); + fixture.detectChanges(); + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set(','); + + equal('123456,10', '123 456,10', fixture, false, Type); + expect(inputTarget.value).toBe('123 456,10'); + expect(component.form.value).toBe('123456.10'); + + component.thousandSeparator.set('.'); + fixture.detectChanges(); + + equal('123456,10', '123.456,10', fixture, false, Type); + expect(inputTarget.value).toBe('123.456,10'); + expect(component.form.value).toBe('123456.10'); + + component.thousandSeparator.set('-'); + fixture.detectChanges(); + + equal('123456,10', '123-456,10', fixture, false, Type); + expect(inputTarget.value).toBe('123-456,10'); + expect(component.form.value).toBe('123456.10'); + + component.thousandSeparator.set(','); + fixture.detectChanges(); + + equal('123456.10', '123,456.10', fixture, false, Type); + expect(inputTarget.value).toBe('123,456.10'); + expect(component.form.value).toBe('123456.10'); + }); });