fix: disable difinition work [ref:#803] (#826)

* fix: disable difinition work [ref:#803] * feat: add template for change log [ref:no-ref] * fix: prettier errors [ref:no-ref] Co-authored-by: Igor Nepipenko <[email protected]>
JsDaddy · Nov 13, 2020 · e0622fe · e0622fe
1 parent 125d658
commit e0622fe
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+<a name="11.1.0"></a>
+
+# 11.1.0 (2020-11-11)
+
+### Bug Fixes
+
+No difinition for form control with `{value, disable} should work ([#803](https://github.com/JsDaddy/ngx-mask/issues/803)) ([826](https://github.com/JsDaddy/ngx-mask/pull/826))
+
 <a name="11.0.0">
 
 # [11.0.0 Update to Angular 11](2020-11-12)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "release:major": "npm run version:major && npm run build:lib && npm run pack:lib && npm run publish:lib",
     "release:minor": "npm run version:minor && npm run build:lib && npm run pack:lib && npm run publish:lib",
     "release:patch": "npm run version:patch && npm run build:lib && npm run pack:lib && npm run publish:lib",
-    "start": "ng serve -o showcase",
+    "start": "ng serve -o showcase --hmr",
     "start-prod": "angular-http-server --path dist/showcase --p 3000 --silent",
     "test": "npm run test:lib",
     "test:all": "npm run test:app && npm run test:lib",

diff --git a/projects/ngx-mask-lib/src/lib/mask.directive.ts b/projects/ngx-mask-lib/src/lib/mask.directive.ts
@@ -296,7 +296,7 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
       el.selectionStart > this._maskService.prefix.length &&
       // tslint:disable-next-line
       (e as any).keyCode !== 38
-    )
+    ) {
       if (this._maskService.showMaskTyped) {
         // We are showing the mask in the input
         this._maskService.maskIsShown = this._maskService.showMaskInInput();
@@ -312,6 +312,7 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
           }
         }
       }
+    }
     const nextValue: string | null =
       !el.value || el.value === this._maskService.prefix
         ? this._maskService.prefix + this._maskService.maskIsShown
@@ -412,7 +413,14 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
   }
 
   /** It writes the value in the input */
-  public async writeValue(inputValue: string | number): Promise<void> {
+  public async writeValue(inputValue: string | number | { value: string | number; disable?: boolean }): Promise<void> {
+    if (typeof inputValue === 'object' && inputValue !== null && 'value' in inputValue) {
+      if ('disable' in inputValue) {
+        this.setDisabledState(Boolean(inputValue.disable));
+      }
+      inputValue = inputValue.value;
+    }
+
     if (inputValue === undefined) {
       inputValue = '';
     }
@@ -494,6 +502,7 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
       maskExp
     );
   }
+
   // tslint:disable-next-line:no-any
   private _applyMask(): any {
     this._maskService.maskExpression = this._repeatPatternSymbols(this._maskValue || '');

diff --git a/projects/ngx-mask-lib/src/lib/mask.service.ts b/projects/ngx-mask-lib/src/lib/mask.service.ts
@@ -19,8 +19,6 @@ export class MaskService extends MaskApplierService {
    */
   public writingValue: boolean = false;
 
-  private _formElement: HTMLInputElement;
-
   public onChange = (_: any) => {};
 
   public constructor(
@@ -30,7 +28,6 @@ export class MaskService extends MaskApplierService {
     private _renderer: Renderer2
   ) {
     super(_config);
-    this._formElement = this._elementRef.nativeElement;
   }
 
   // tslint:disable-next-line:cyclomatic-complexity
@@ -116,8 +113,9 @@ export class MaskService extends MaskApplierService {
   }
 
   public applyValueChanges(position: number = 0, cb: Function = () => {}): void {
-    this._formElement.value = this.applyMask(this._formElement.value, this.maskExpression, position, cb);
-    if (this._formElement === this.document.activeElement) {
+    const formElement = this._elementRef.nativeElement;
+    formElement.value = this.applyMask(formElement.value, this.maskExpression, position, cb);
+    if (formElement === this.document.activeElement) {
       return;
     }
     this.clearIfNotMatchFn();
@@ -199,18 +197,19 @@ export class MaskService extends MaskApplierService {
   }
 
   public clearIfNotMatchFn(): void {
+    const formElement = this._elementRef.nativeElement;
     if (
       this.clearIfNotMatch &&
       this.prefix.length + this.maskExpression.length + this.suffix.length !==
-        this._formElement.value.replace(/_/g, '').length
+        formElement.value.replace(/_/g, '').length
     ) {
       this.formElementProperty = ['value', ''];
-      this.applyMask(this._formElement.value, this.maskExpression);
+      this.applyMask(formElement.value, this.maskExpression);
     }
   }
 
   public set formElementProperty([name, value]: [string, string | boolean]) {
-    this._renderer.setProperty(this._formElement, name, value);
+    Promise.resolve().then(() => this._renderer.setProperty(this._elementRef.nativeElement, name, value));
   }
 
   public checkSpecialCharAmount(mask: string): number {

diff --git a/projects/ngx-mask-lib/src/test/basic-logic.spec.ts b/projects/ngx-mask-lib/src/test/basic-logic.spec.ts
@@ -397,7 +397,11 @@ describe('Directive: Mask', () => {
 
     const directiveInstance: MaskDirective = debugElement.injector.get<MaskDirective>(MaskDirective);
     spyOn(directiveInstance['_maskService'], 'applyMask');
-    debugElement.triggerEventHandler('keydown', { code: 'Backspace', keyCode: 8, target: inputTarget });
+    debugElement.triggerEventHandler('keydown', {
+      code: 'Backspace',
+      keyCode: 8,
+      target: inputTarget,
+    });
     expect(directiveInstance['_maskService'].applyMask).toHaveBeenCalled();
   });
 
@@ -415,7 +419,26 @@ describe('Directive: Mask', () => {
 
     const directiveInstance: MaskDirective = debugElement.injector.get<MaskDirective>(MaskDirective);
     spyOn(directiveInstance['_maskService'], 'applyMask');
-    debugElement.triggerEventHandler('keydown', { code: 'Backspace', keyCode: 8, target: inputTarget });
+    debugElement.triggerEventHandler('keydown', {
+      code: 'Backspace',
+      keyCode: 8,
+      target: inputTarget,
+    });
     expect(directiveInstance['_maskService'].applyMask).not.toHaveBeenCalled();
   });
+
+  it('should right work with {value, disable}', async (done) => {
+    component.mask = '000';
+    fixture.detectChanges();
+    component.form.setValue({
+      value: 123,
+      disable: true,
+    });
+    fixture.detectChanges();
+    const inputEl = fixture.debugElement.query(By.css('input'));
+    Promise.resolve().then(() => {
+      expect(inputEl.properties.disabled).toEqual(true);
+      done();
+    });
+  });
 });
diff --git a/projects/ngx-mask-lib/src/test/clear-if-not-match-the-mask.spec.ts b/projects/ngx-mask-lib/src/test/clear-if-not-match-the-mask.spec.ts
@@ -18,21 +18,21 @@ describe('Directive: Mask', () => {
     fixture.detectChanges();
   });
 
-  it('should clear if mask is not matched', () => {
+  it('should clear if mask is not matched', async () => {
     component.mask = '000.000-00';
     component.clearIfNotMatch = true;
-    equal('', '', fixture);
-    equal('2578989', '', fixture);
+    equal('', '', fixture, true);
+    equal('2578989', '', fixture, true);
     equal('2578989888988', '257.898-98', fixture);
     equal('111.111-11', '111.111-11', fixture);
   });
 
-  it('should clear if mask is not matched with prefix', () => {
+  it('should clear if mask is not matched with prefix', async () => {
     component.mask = '000-000-00';
     component.prefix = '+5';
     component.clearIfNotMatch = true;
-    equal('', '', fixture);
-    equal('2578989', '', fixture);
+    equal('', '', fixture, true);
+    equal('2578989', '', fixture, true);
     equal('25789898', '+5257-898-98', fixture);
   });
 });
diff --git a/projects/ngx-mask-lib/src/test/utils/test-functions.component.ts b/projects/ngx-mask-lib/src/test/utils/test-functions.component.ts
@@ -11,6 +11,14 @@ export function typeTest(inputValue: string, fixture: any): string {
 }
 
 // tslint:disable-next-line:no-any
-export function equal(value: string, expectedValue: string, fixture: any): void {
-  expect(typeTest(value, fixture)).toBe(expectedValue);
+export function equal(value: string, expectedValue: string, fixture: any, async = false): void {
+  typeTest(value, fixture);
+
+  if (async) {
+    Promise.resolve().then(() => {
+      expect(fixture.nativeElement.querySelector('input').value).toBe(expectedValue);
+    });
+    return;
+  }
+  expect(fixture.nativeElement.querySelector('input').value).toBe(expectedValue);
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -16,8 +16,10 @@
     "typeRoots": ["node_modules/@types"],
     "lib": ["es2017", "dom"],
     "paths": {
-      "ngx-mask": ["dist/ngx-mask-lib"],
-      "ngx-mask/*": ["dist/ngx-mask-lib/*"]
+      //      "ngx-mask": ["dist/ngx-mask-lib"],
+      //      "ngx-mask/*": ["dist/ngx-mask-lib/*"]
+      "ngx-mask": ["projects/ngx-mask-lib/src"],
+      "ngx-mask/*": ["projects/ngx-mask-lib/src"]
     }
   }
 }