fix(ref: no-ref): fix issues

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
 

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
 <input type="text" prefix="+7" instantPrefix="false" mask="(000) 000 00 00" />
-<input type="text" prefix="+7" instantPrefix="true"  mask="(000) 000 00 00" />
+<input type="text" prefix="+7" instantPrefix="true" mask="(000) 000 00 00" />
 ```
 
-
 ### suffix (string)
 
 You can add suffix to you masked value

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;

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;
         }

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', () => {

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');
+    });
 });