diff --git a/projects/ngx-mask-lib/src/lib/mask-applier.service.ts b/projects/ngx-mask-lib/src/lib/mask-applier.service.ts index 2ff0e39f..1ca53486 100644 --- a/projects/ngx-mask-lib/src/lib/mask-applier.service.ts +++ b/projects/ngx-mask-lib/src/lib/mask-applier.service.ts @@ -54,14 +54,14 @@ export class MaskApplierService { } public applyMask( - inputValue: string, + inputValue: string | object | boolean | null | undefined, maskExpression: string, position: number = 0, justPasted: boolean = false, backspaced: boolean = false, cb: Function = () => {} ): string { - if (inputValue === undefined || inputValue === null || maskExpression === undefined) { + if (!maskExpression || typeof inputValue !== 'string') { return ''; } let cursor = 0; diff --git a/projects/ngx-mask-lib/src/lib/mask.directive.ts b/projects/ngx-mask-lib/src/lib/mask.directive.ts index e0ad7385..af7ed415 100644 --- a/projects/ngx-mask-lib/src/lib/mask.directive.ts +++ b/projects/ngx-mask-lib/src/lib/mask.directive.ts @@ -438,15 +438,16 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator inputValue = inputValue.value; } - if (inputValue === undefined) { - inputValue = ''; - } if (typeof inputValue === 'number') { inputValue = String(inputValue); inputValue = this.decimalMarker !== '.' ? inputValue.replace('.', this.decimalMarker) : inputValue; this._maskService.isNumberValue = true; } + if (typeof inputValue !== 'string') { + inputValue = ''; + } + this._inputValue = inputValue; this._setMask(); diff --git a/projects/ngx-mask-lib/src/test/secure-mask.spec.ts b/projects/ngx-mask-lib/src/test/secure-mask.spec.ts index 52489eb7..735679dd 100644 --- a/projects/ngx-mask-lib/src/test/secure-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/secure-mask.spec.ts @@ -122,4 +122,14 @@ describe('Directive: Mask (Secure)', () => { expect(fixture.nativeElement.querySelector('input').value).toBe('123/45/6789'); }); }); + + it('mask changes should work with null input', () => { + component.hiddenInput = true; + component.mask = '000/00/0000'; + equal('987654321', '987/65/4321', fixture); + component.form.reset(); + component.mask = 'XXX/X0/0000'; + equal('54321', '***/*1', fixture); + expect(component.form.value).toBe('54321'); + }); }); diff --git a/src/app/bugs/bugs.component.html b/src/app/bugs/bugs.component.html index b6b53a25..de9c106d 100644 --- a/src/app/bugs/bugs.component.html +++ b/src/app/bugs/bugs.component.html @@ -149,7 +149,7 @@ type="text" placeholder="Secure input" [hiddenInput]="true" - mask="XXX-X0-0000" + [mask]="mask" formControlName="SecureInput" id="SecureInput" /> diff --git a/src/app/bugs/bugs.component.ts b/src/app/bugs/bugs.component.ts index 767823de..611e24ab 100644 --- a/src/app/bugs/bugs.component.ts +++ b/src/app/bugs/bugs.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; @Component({ templateUrl: './bugs.component.html', @@ -8,7 +9,7 @@ import { Subject } from 'rxjs'; export class BugsComponent implements OnInit, OnDestroy { public bugsForm: FormGroup; public submitted: boolean = false; - + public mask = 'XXX-XX-XXXX'; // Can be used as a takeUntil for any observables this component may subscribe to. e.g. a form control valueChanges private onDestroy$ = new Subject(); @@ -28,7 +29,19 @@ export class BugsComponent implements OnInit, OnDestroy { this.onDestroy$.complete(); } - ngOnInit(): void {} + ngOnInit(): void { + this.bugsForm + .get('SecureInput') + ?.valueChanges.pipe(takeUntil(this.onDestroy$)) + .subscribe((value) => { + console.log(value); + if (this.bugsForm.get('SecureInput')?.valid) { + this.mask = '000-00-0000'; + } else { + this.mask = 'XXX-X0-0000'; + } + }); + } submitForm(): void { this.submitted = true;