Allow placeholder customization (JsDaddy#595)

Saucistophe · Thegrep01 · commit 66a6cb7d5ff6 · 2019-10-11T14:18:35.000+03:00
diff --git a/README.md b/README.md
@@ -182,6 +182,16 @@ Model value: 789-874.98
  <input mask="(000) 000-0000" prefix="+7" [showMaskTyped] = "true">
 ```
 
+### placeHolderCharacter (string)
+
+  If the `showMaskTyped` parameter is enabled, this setting customizes the character used as placeholder. Default value is '_'.
+
+##### Usage
+
+```html
+ <input mask="(000) 000-0000" prefix="+7" [showMaskTyped] = "true" placeHolderCharacter="*">
+```
+
 ### clearIfNotMatch (boolean)
    You can choose clear the input if the input value **not match** the mask, default value false
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -330,6 +330,45 @@ <h1 class="title">
             </div>
         </div>
     </div>
+    <div class="container">
+      <div class="row">
+          <div class="col-12">
+              <div class="mat-card-wr">
+                  <mat-card>
+                      <mat-card-header>
+                          <mat-card-title>Phone number</mat-card-title>
+                          <mat-card-subtitle>
+                              You can add 'placeHolderCharacter' property to changed the placeholder character used when displaying the mask.
+                          </mat-card-subtitle>
+                      </mat-card-header>
+                      <mat-card-content>
+                          <div class="flex-row">
+                              <div class="flex-cell-padding">
+                                  <mat-form-field>
+                                      <input
+                                          matInput
+                                          placeholder="Phone number"
+                                          mask="(000) 000-0000"
+                                          [formControl]="form1"
+                                          prefix="+5"
+                                          [(ngModel)]="showMaskModel"
+                                          [showMaskTyped]="true"
+                                          placeHolderCharacter="*"
+                                      />
+                                      <mat-hint><b>Mask: </b>+5 (000) 000 0000</mat-hint>
+                                  </mat-form-field>
+                              </div>
+                              <div class="flex-cell">
+                                  <p><b>FormControl:</b> {{ form1.value ? form1.value : 'Empty' }}</p>
+                                  <p><b>NgModel:</b> {{ showMaskModel ? showMaskModel : 'Empty' }}</p>
+                              </div>
+                          </div>
+                      </mat-card-content>
+                  </mat-card>
+              </div>
+          </div>
+      </div>
+  </div>
     <div class="container">
         <div class="row">
             <div class="col-12">
diff --git a/src/app/ngx-mask/config.ts b/src/app/ngx-mask/config.ts
@@ -8,6 +8,7 @@ export interface IConfig {
     clearIfNotMatch: boolean;
     showTemplate: boolean;
     showMaskTyped: boolean;
+    placeHolderCharacter: string;
     shownMaskExpression: string;
     dropSpecialCharacters: boolean | string[];
     specialCharacters: string[];
@@ -36,6 +37,7 @@ export const initialConfig: IConfig = {
     clearIfNotMatch: false,
     showTemplate: false,
     showMaskTyped: false,
+    placeHolderCharacter: '_',
     dropSpecialCharacters: true,
     hiddenInput: undefined,
     shownMaskExpression: '',
diff --git a/src/app/ngx-mask/mask-applier.service.ts b/src/app/ngx-mask/mask-applier.service.ts
@@ -19,6 +19,7 @@ export class MaskApplierService {
     public customPattern!: IConfig['patterns'];
     public ipError?: boolean;
     public showMaskTyped!: IConfig['showMaskTyped'];
+    public placeHolderCharacter!: IConfig['placeHolderCharacter'];
     public validation: IConfig['validation'];
     public separatorLimit: IConfig['separatorLimit'];
 
@@ -36,6 +37,7 @@ export class MaskApplierService {
         this.decimalMarker = this._config.decimalMarker;
         this.hiddenInput = this._config.hiddenInput;
         this.showMaskTyped = this._config.showMaskTyped;
+        this.placeHolderCharacter = this._config.placeHolderCharacter;
         this.validation = this._config.validation;
         this.separatorLimit = this._config.separatorLimit;
     }
@@ -326,7 +328,7 @@ export class MaskApplierService {
                 } else if (
                     this.showMaskTyped &&
                     this.maskSpecialCharacters.indexOf(inputSymbol) < 0 &&
-                    inputSymbol !== '_'
+                    inputSymbol !== this.placeHolderCharacter
                 ) {
                     stepBack = true;
                 }
diff --git a/src/app/ngx-mask/mask.directive.ts b/src/app/ngx-mask/mask.directive.ts
@@ -32,6 +32,7 @@ export class MaskDirective implements ControlValueAccessor, OnChanges {
     @Input() public dropSpecialCharacters: IConfig['dropSpecialCharacters'] | null = null;
     @Input() public hiddenInput: IConfig['hiddenInput'] | null = null;
     @Input() public showMaskTyped: IConfig['showMaskTyped'] | null = null;
+    @Input() public placeHolderCharacter: IConfig['placeHolderCharacter'] | null = null;
     @Input() public shownMaskExpression: IConfig['shownMaskExpression'] | null = null;
     @Input() public showTemplate: IConfig['showTemplate'] | null = null;
     @Input() public clearIfNotMatch: IConfig['clearIfNotMatch'] | null = null;
@@ -56,7 +57,7 @@ export class MaskDirective implements ControlValueAccessor, OnChanges {
     public onTouch = () => {};
 
     public ngOnChanges(changes: SimpleChanges): void {
-        // tslint:disable-next-line:max-line-length
+        // tslint:disable-next-line:max-line-length: cyclomatic-complexity
         const {
             maskExpression,
             specialCharacters,
@@ -68,6 +69,7 @@ export class MaskDirective implements ControlValueAccessor, OnChanges {
             dropSpecialCharacters,
             hiddenInput,
             showMaskTyped,
+            placeHolderCharacter,
             shownMaskExpression,
             showTemplate,
             clearIfNotMatch,
@@ -108,6 +110,9 @@ export class MaskDirective implements ControlValueAccessor, OnChanges {
         if (showMaskTyped) {
             this._maskService.showMaskTyped = showMaskTyped.currentValue;
         }
+        if (placeHolderCharacter) {
+          this._maskService.placeHolderCharacter = placeHolderCharacter.currentValue;
+        }
         if (shownMaskExpression) {
             this._maskService.shownMaskExpression = shownMaskExpression.currentValue;
         }
diff --git a/src/app/ngx-mask/mask.service.ts b/src/app/ngx-mask/mask.service.ts
@@ -9,6 +9,7 @@ export class MaskService extends MaskApplierService {
     public maskExpression: string = '';
     public isNumberValue: boolean = false;
     public showMaskTyped: boolean = false;
+    public placeHolderCharacter: string = '_';
     public maskIsShown: string = '';
     public selStart: number | null = null;
     public selEnd: number | null = null;
@@ -165,7 +166,7 @@ export class MaskService extends MaskApplierService {
             if (inputVal) {
                 return this._checkForIp(inputVal);
             }
-            return this.maskExpression.replace(/\w/g, '_');
+            return this.maskExpression.replace(/\w/g, this.placeHolderCharacter);
         }
         return '';
     }
@@ -192,7 +193,7 @@ export class MaskService extends MaskApplierService {
 
     private _checkForIp(inputVal: string): string {
         if (inputVal === '#') {
-            return '_._._._';
+            return `${this.placeHolderCharacter}.${this.placeHolderCharacter}.${this.placeHolderCharacter}.${this.placeHolderCharacter}`;
         }
         const arr: string[] = [];
         for (let i: number = 0; i < inputVal.length; i++) {
@@ -201,13 +202,13 @@ export class MaskService extends MaskApplierService {
             }
         }
         if (arr.length <= 3) {
-            return '_._._';
+            return `${this.placeHolderCharacter}.${this.placeHolderCharacter}.${this.placeHolderCharacter}`;
         }
         if (arr.length > 3 && arr.length <= 6) {
-            return '_._';
+            return `${this.placeHolderCharacter}.${this.placeHolderCharacter}`;
         }
         if (arr.length > 6 && arr.length <= 9) {
-            return '_';
+          return `${this.placeHolderCharacter}`;
         }
         if (arr.length > 9 && arr.length <= 12) {
             return '';
diff --git a/src/app/ngx-mask/test/place-holder-character.spec.ts b/src/app/ngx-mask/test/place-holder-character.spec.ts
@@ -0,0 +1,57 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NgxMaskModule } from '../ngx-mask.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { TestMaskComponent } from './utils/test-component.component';
+import { equal } from './utils/test-functions.component';
+
+describe('Directive: Mask', () => {
+    let fixture: ComponentFixture<TestMaskComponent>;
+    let component: TestMaskComponent;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestMaskComponent],
+            imports: [ReactiveFormsModule, NgxMaskModule.forRoot()],
+        });
+        fixture = TestBed.createComponent(TestMaskComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should display the default placeholder when not configured', () => {
+        component.mask = '(000) 000-0000';
+        component.showMaskTyped = true;
+        equal('', '(___) ___-____', fixture);
+        equal('2345678', '(234) 567-8___', fixture);
+
+        component.prefix = '+7';
+        component.showMaskTyped = true;
+        equal('', '+7(___) ___-____', fixture);
+        equal('2345678', '+7(234) 567-8___', fixture);
+
+        component.mask = 'IP';
+        component.prefix = '';
+        component.showMaskTyped = true;
+        equal('', '_._._._', fixture);
+        equal('1921681', '192.168.1_', fixture);
+    });
+
+    it('should display the modified placeholder when configured', () => {
+      component.mask = '(000) 000-0000';
+      component.showMaskTyped = true;
+      component.placeHolderCharacter = '*';
+      equal('', '(***) ***-****', fixture);
+      equal('2345678', '(234) 567-8***', fixture);
+
+      component.prefix = '+7';
+      component.showMaskTyped = true;
+      equal('', '+7(***) ***-****', fixture);
+      equal('2345678', '+7(234) 567-8***', fixture);
+
+      component.mask = 'IP';
+      component.prefix = '';
+      component.showMaskTyped = true;
+      equal('', '*.*.*.*', fixture);
+      equal('1921681', '192.168.1*', fixture);
+    });
+});
diff --git a/src/app/ngx-mask/test/utils/test-component.component.ts b/src/app/ngx-mask/test/utils/test-component.component.ts
@@ -18,6 +18,7 @@ import { IConfig } from 'public_api';
             [decimalMarker]="decimalMarker"
             [formControl]="form"
             [showMaskTyped]="showMaskTyped"
+            [placeHolderCharacter]="placeHolderCharacter"
             [separatorLimit]="separatorLimit"
             [hiddenInput]="hiddenInput"
             [(ngModel)]="ngModelValue"
@@ -37,6 +38,7 @@ export class TestMaskComponent {
     public suffix: IConfig['suffix'] = '';
     public specialCharacters!: IConfig['specialCharacters'];
     public showMaskTyped: IConfig['showMaskTyped'] = false;
+    public placeHolderCharacter: IConfig['placeHolderCharacter'] = '_';
     public hiddenInput: IConfig['hiddenInput'] = false;
     public separatorLimit: IConfig['separatorLimit'] = '';
 }

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ export class MaskService extends MaskApplierService {`
`9`	`9`	`public maskExpression: string = '';`
`10`	`10`	`public isNumberValue: boolean = false;`
`11`	`11`	`public showMaskTyped: boolean = false;`
	`12`	`+ public placeHolderCharacter: string = '_';`
`12`	`13`	`public maskIsShown: string = '';`
`13`	`14`	`public selStart: number \| null = null;`
`14`	`15`	`public selEnd: number \| null = null;`
`@@ -165,7 +166,7 @@ export class MaskService extends MaskApplierService {`
`165`	`166`	`if (inputVal) {`
`166`	`167`	`return this._checkForIp(inputVal);`
`167`	`168`	`}`
`168`		`- return this.maskExpression.replace(/\w/g, '_');`
	`169`	`+ return this.maskExpression.replace(/\w/g, this.placeHolderCharacter);`
`169`	`170`	`}`
`170`	`171`	`return '';`
`171`	`172`	`}`
`@@ -192,7 +193,7 @@ export class MaskService extends MaskApplierService {`
`192`	`193`
`193`	`194`	`private _checkForIp(inputVal: string): string {`
`194`	`195`	`if (inputVal === '#') {`
`195`		`- return '_._._._';`
	`196`	+ return `${this.placeHolderCharacter}.${this.placeHolderCharacter}.${this.placeHolderCharacter}.${this.placeHolderCharacter}`;
`196`	`197`	`}`
`197`	`198`	`const arr: string[] = [];`
`198`	`199`	`for (let i: number = 0; i < inputVal.length; i++) {`
`@@ -201,13 +202,13 @@ export class MaskService extends MaskApplierService {`
`201`	`202`	`}`
`202`	`203`	`}`
`203`	`204`	`if (arr.length <= 3) {`
`204`		`- return '_._._';`
	`205`	+ return `${this.placeHolderCharacter}.${this.placeHolderCharacter}.${this.placeHolderCharacter}`;
`205`	`206`	`}`
`206`	`207`	`if (arr.length > 3 && arr.length <= 6) {`
`207`		`- return '_._';`
	`208`	+ return `${this.placeHolderCharacter}.${this.placeHolderCharacter}`;
`208`	`209`	`}`
`209`	`210`	`if (arr.length > 6 && arr.length <= 9) {`
`210`		`- return '_';`
	`211`	+ return `${this.placeHolderCharacter}`;
`211`	`212`	`}`
`212`	`213`	`if (arr.length > 9 && arr.length <= 12) {`
`213`	`214`	`return '';`