fix(JsDaddy#892): check if input is a string

BGBRWR · Jul 28, 2021 · d8bc719 · d8bc719
1 parent 2851cb0
commit d8bc719
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,14 +1,15 @@
 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',
 })
 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<void>();
 
@@ -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;