feat(ref:no-ref): ng21 v6

Author: igor.nepipenko

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### fix
 
 - Fix ([#1590](https://github.com/JsDaddy/ngx-mask/issues/1590))
+- Fix ([#1591](https://github.com/JsDaddy/ngx-mask/issues/1591))
 
 # 20.0.3(2025-08-01)
 

projects/ngx-mask-lib/src/lib/ngx-mask.service.ts

@@ -272,8 +272,17 @@ export class NgxMaskService extends NgxMaskApplierService {
         }
 
         // Propagate the input value back to the Angular model
-        // eslint-disable-next-line no-unused-expressions,@typescript-eslint/no-unused-expressions
-        this._emitValue ? this.formControlResult(result) : '';
+        // Only emit if:
+        // 1. _emitValue is true (value changed), AND
+        // 2. Either mask didn't change, OR triggerOnMaskChange is true
+        const shouldEmit = this._emitValue && (!this.maskChanged || this.triggerOnMaskChange);
+        if (shouldEmit) {
+            this.formControlResult(result);
+        }
+        // Reset maskChanged flag even if we didn't emit
+        if (this.maskChanged && !this.triggerOnMaskChange) {
+            this.maskChanged = false;
+        }
 
         // Handle hidden input and showMaskTyped
         if (!this.showMaskTyped || (this.showMaskTyped && this.hiddenInput)) {

projects/ngx-mask-lib/src/test/separator-3.spec.ts

@@ -455,6 +455,7 @@ describe('Separator: Mask', () => {
         component.mask.set('separator.2');
         component.thousandSeparator.set(' ');
         component.decimalMarker.set(',');
+        fixture.detectChanges();
 
         const inputElement = fixture.nativeElement.querySelector('input');
         inputElement.value = '100000,00';

projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts

@@ -62,8 +62,10 @@ describe('Directive: Mask (Trigger on mask change)', () => {
         fixture.detectChanges();
         await fixture.whenStable();
         inputEl = fixture.debugElement.query(By.css('input'));
+        // Display is formatted with new mask
         expect(inputEl.nativeElement.value).equal('79 123 45 67');
-        expect(component.form.value).equal('791234567');
+        // But form value should NOT be updated when triggerOnMaskChange is false
+        expect(component.form.value).equal('7912345678');
     });
 
     it('should trigger form value update if mask is changed when triggerOnMaskChange is true', async () => {
@@ -97,6 +99,78 @@ describe('Directive: Mask (Trigger on mask change)', () => {
 
         component.mask.set('S0S 0S0');
         await equal(inputTarget.value, '', fixture, true);
-        expect(component.form.value).equal('');
+        // Form value should NOT be updated when triggerOnMaskChange is false
+        expect(component.form.value).equal('1234');
+    });
+
+    it('should not mark form as dirty when mask changes and triggerOnMaskChange is false', async () => {
+        component.mask.set('0000');
+        component.triggerOnMaskChange.set(false);
+        fixture.detectChanges();
+
+        // Set value programmatically
+        component.form.setValue('1234');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        // Reset to pristine state (setValue may trigger onChange in some cases)
+        component.form.markAsPristine();
+        expect(component.form.pristine).equal(true);
+
+        // Change the mask - this should NOT mark form as dirty
+        component.mask.set('00-00');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        // Form should still be pristine after mask change when triggerOnMaskChange is false
+        expect(component.form.pristine).equal(true);
+        expect(component.form.dirty).equal(false);
+    });
+
+    it('should not mark form as dirty when mask changes from empty to pattern and triggerOnMaskChange is false', async () => {
+        component.mask.set('');
+        component.triggerOnMaskChange.set(false);
+        fixture.detectChanges();
+
+        // Set value programmatically
+        component.form.setValue('12345678');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        // Reset to pristine state
+        component.form.markAsPristine();
+        expect(component.form.pristine).equal(true);
+
+        // Apply a mask to the existing value - should NOT mark as dirty
+        component.mask.set('0000-0000');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        // Form should still be pristine
+        expect(component.form.pristine).equal(true);
+        expect(component.form.dirty).equal(false);
+    });
+
+    it('should not mark form as dirty when mask changes with phone pattern and triggerOnMaskChange is false', async () => {
+        component.mask.set('(000) 000-0000');
+        component.triggerOnMaskChange.set(false);
+        fixture.detectChanges();
+
+        component.form.setValue('1234567890');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        // Reset to pristine state
+        component.form.markAsPristine();
+        expect(component.form.pristine).equal(true);
+
+        // Change to a different phone mask format - should NOT mark as dirty
+        component.mask.set('000-000-0000');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        // Should remain pristine when triggerOnMaskChange is false
+        expect(component.form.pristine).equal(true);
+        expect(component.form.dirty).equal(false);
     });
 });