From e0622fe23d4bc1e76e344e74d8626fac62b5f90b Mon Sep 17 00:00:00 2001 From: Igor Nepipenko Date: Fri, 13 Nov 2020 19:20:54 +0200 Subject: [PATCH] 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 --- CHANGELOG.md | 8 ++++++ package-lock.json | 2 +- package.json | 2 +- .../ngx-mask-lib/src/lib/mask.directive.ts | 13 +++++++-- projects/ngx-mask-lib/src/lib/mask.service.ts | 15 +++++------ .../ngx-mask-lib/src/test/basic-logic.spec.ts | 27 +++++++++++++++++-- .../test/clear-if-not-match-the-mask.spec.ts | 12 ++++----- .../test/utils/test-functions.component.ts | 12 +++++++-- tsconfig.json | 6 +++-- 9 files changed, 73 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 66066a30..a6465d42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ + + +# 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)) + # [11.0.0 Update to Angular 11](2020-11-12) diff --git a/package-lock.json b/package-lock.json index 5e31829e..31b439e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ngx-mask", - "version": "10.0.4", + "version": "11.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 22135a3f..edab8203 100644 --- 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 index ffd64140..5d18adc9 100644 --- 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 { + public async writeValue(inputValue: string | number | { value: string | number; disable?: boolean }): Promise { + 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 index 47108ddf..3c41e02b 100644 --- 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 index 3f294664..8fbd389c 100644 --- 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); 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); 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 index 81060d0b..ae9afcdc 100644 --- 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 index 87d17019..3f803a21 100644 --- 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 index 2970fee2..bd1efca2 100644 --- 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"] } } }