Skip to content

Commit 54e804e

Browse files
jackofdiamond5jackofdiamond5
committed
chore(igxMask): set mask def value in maskOptions
1 parent f1a7b12 commit 54e804e

File tree

2 files changed

+48
-49
lines changed

2 files changed

+48
-49
lines changed

‎projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export class IgxMaskDirective implements OnInit, ControlValueAccessor {
2323
* ```
2424
*/
2525
@Input('igxMask')
26-
public mask = 'CCCCCCCCCC';
26+
public mask: string;
2727

2828
/**
2929
* Sets the character representing a fillable spot in the input mask.
@@ -103,7 +103,7 @@ export class IgxMaskDirective implements OnInit, ControlValueAccessor {
103103

104104
/** @hidden */
105105
protected get maskOptions() {
106-
const format = this.mask;
106+
const format = this.mask || 'CCCCCCCCCC';
107107
const promptChar = this.promptChar && this.promptChar.substring(0, 1);
108108
return { format, promptChar };
109109
}

‎src/app/mask/mask.sample.html

+46-47
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,46 @@
1-
<!-- <div class="sample-wrapper">
2-
<app-page-header title="Mask">
3-
Provide means for controlling user input and formatting the visible value based on a configurable mask rules.
4-
</app-page-header>
5-
<section class="sample-content">
6-
<article class="sample-column">
7-
<form class="input-sample" action="/" method="POST">
8-
<h4>Personal Data</h4>
9-
<br />
10-
<igx-input-group>
11-
<input igxInput name="name" type="text" [(ngModel)]="person.name" required />
12-
<label igxLabel for="name">Name</label>
13-
</igx-input-group>
14-
<igx-input-group>
15-
<input igxInput #dateInput name="birthday" type="text" [igxMask]="'00/00/0000'" [(ngModel)]="person.birthday" (blur)="validateDate(dateInput, snackbar)"/>
16-
<label igxLabel for="email">Birthday</label>
17-
</igx-input-group>
18-
<igx-input-group>
19-
<input igxInput #ssn name="socialSecurityNumber" type="text" [igxMask]="'###-##-####'" [(ngModel)]="person.socialSecurityNumber" (blur)="validateSSN(ssn, snackbar)"/>
20-
<label igxLabel for="socialSecurityNumber">Social Security Number</label>
21-
</igx-input-group>
22-
<igx-input-group>
23-
<input igxInput #phone name="phone" type="text" [igxMask]="'(####) 00-00-00 Ext. 9999'" [(ngModel)]="person.phone" />
24-
<label igxLabel for="phone">Phone</label>
25-
</igx-input-group>
26-
<igx-snackbar #snackbar [displayTime]="1000" (onAction)="snackbar.hide()"></igx-snackbar>
27-
</form>
28-
</article>
29-
<article class="sample-column">
30-
<form class="input-sample" action="/" method="POST">
31-
<h4>Mask Using Pipes</h4>
32-
<br/>
33-
<igx-input-group>
34-
<label igxLabel for="email">Increase</label>
35-
<input igxInput name="increase" type="text" [(ngModel)]="value"
36-
[igxMask]="mask"
37-
[placeholder]="placeholder"
38-
[focusedValuePipe]="inputFormat"
39-
[displayValuePipe]="displayFormat"/>
40-
<igx-hint position="start">model value: {{value}}</igx-hint>
41-
</igx-input-group>
42-
<div style="height: 130px"></div>
43-
</form>
44-
</article>
45-
</section>
46-
</div> -->
47-
<input type="text" igxMask>
1+
<div class="sample-wrapper">
2+
<app-page-header title="Mask">
3+
Provide means for controlling user input and formatting the visible value based on a configurable mask rules.
4+
</app-page-header>
5+
<section class="sample-content">
6+
<article class="sample-column">
7+
<form class="input-sample" action="/" method="POST">
8+
<h4>Personal Data</h4>
9+
<br />
10+
<igx-input-group>
11+
<input igxInput name="name" type="text" [(ngModel)]="person.name" required />
12+
<label igxLabel for="name">Name</label>
13+
</igx-input-group>
14+
<igx-input-group>
15+
<input igxInput #dateInput name="birthday" type="text" [igxMask]="'00/00/0000'" [(ngModel)]="person.birthday"
16+
(blur)="validateDate(dateInput, snackbar)" />
17+
<label igxLabel for="email">Birthday</label>
18+
</igx-input-group>
19+
<igx-input-group>
20+
<input igxInput #ssn name="socialSecurityNumber" type="text" [igxMask]="'###-##-####'"
21+
[(ngModel)]="person.socialSecurityNumber" (blur)="validateSSN(ssn, snackbar)" />
22+
<label igxLabel for="socialSecurityNumber">Social Security Number</label>
23+
</igx-input-group>
24+
<igx-input-group>
25+
<input igxInput #phone name="phone" type="text" [igxMask]="'(####) 00-00-00 Ext. 9999'"
26+
[(ngModel)]="person.phone" />
27+
<label igxLabel for="phone">Phone</label>
28+
</igx-input-group>
29+
<igx-snackbar #snackbar [displayTime]="1000" (onAction)="snackbar.hide()"></igx-snackbar>
30+
</form>
31+
</article>
32+
<article class="sample-column">
33+
<form class="input-sample" action="/" method="POST">
34+
<h4>Mask Using Pipes</h4>
35+
<br />
36+
<igx-input-group>
37+
<label igxLabel for="email">Increase</label>
38+
<input igxInput name="increase" type="text" [(ngModel)]="value" [igxMask]="mask" [placeholder]="placeholder"
39+
[focusedValuePipe]="inputFormat" [displayValuePipe]="displayFormat" />
40+
<igx-hint position="start">model value: {{value}}</igx-hint>
41+
</igx-input-group>
42+
<div style="height: 130px"></div>
43+
</form>
44+
</article>
45+
</section>
46+
</div>

0 commit comments

Comments
 (0)