fix(#892): mask change doesn't change form pristine state

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

@@ -90,6 +90,9 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
       leadZeroDateTime,
     } = changes;
     if (maskExpression) {
+      if (maskExpression.currentValue !== maskExpression.previousValue && !maskExpression.firstChange) {
+        this._maskService.maskChanged = true;
+      }
       this._maskValue = maskExpression.currentValue || '';
       if (maskExpression.currentValue && maskExpression.currentValue.split('||').length > 1) {
         this._maskExpressionArray = maskExpression.currentValue.split('||').sort((a: string, b: string) => {

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

@@ -18,6 +18,7 @@ export class MaskService extends MaskApplierService {
    * since writeValue should be a one way only process of writing the DOM value based on the Angular model value.
    */
   public writingValue: boolean = false;
+  public maskChanged: boolean = false;
 
   public onChange = (_: any) => {};
 
@@ -321,7 +322,8 @@ export class MaskService extends MaskApplierService {
    * @param inputValue the current form input value
    */
   private formControlResult(inputValue: string): void {
-    if (this.writingValue) {
+    if (this.writingValue || this.maskChanged) {
+      this.maskChanged = false;
       return;
     }
     if (Array.isArray(this.dropSpecialCharacters)) {

projects/ngx-mask-lib/src/test/secure-mask.spec.ts

@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, tick } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { NgxMaskModule } from '../lib/ngx-mask.module';
@@ -88,4 +88,38 @@ describe('Directive: Mask (Secure)', () => {
       expect(fixture.nativeElement.querySelector('input').value).toBe('***/*5/67');
     });
   });
+
+  it('should be same form state (pristine) after mask change', () => {
+    component.mask = 'XXX/X0/0000';
+    component.hiddenInput = true;
+    component.form.reset('123456789');
+    fixture.detectChanges();
+    expect(component.form.dirty).toBeFalsy();
+    expect(component.form.pristine).toBeTruthy();
+    component.mask = '000/00/0000';
+    fixture.detectChanges();
+    expect(component.form.dirty).toBeFalsy();
+    expect(component.form.pristine).toBeTruthy();
+    fixture.whenStable().then(() => {
+      expect(fixture.nativeElement.querySelector('input').value).toBe('123/45/6789');
+    });
+  });
+
+  it('should be same form state (dirty) after mask change', () => {
+    component.mask = 'XXX/X0/0000';
+    component.hiddenInput = true;
+    component.form.reset('123456789');
+    component.form.markAsDirty();
+    component.form.markAsTouched();
+    fixture.detectChanges();
+    expect(component.form.dirty).toBeTruthy();
+    expect(component.form.pristine).toBeFalsy();
+    component.mask = '000/00/0000';
+    fixture.detectChanges();
+    expect(component.form.dirty).toBeTruthy();
+    expect(component.form.pristine).toBeFalsy();
+    fixture.whenStable().then(() => {
+      expect(fixture.nativeElement.querySelector('input').value).toBe('123/45/6789');
+    });
+  });
 });