Pages UI
Search…
v5.0.1 - Pages Angular
Directives
Forms
Service
Input Helpers
Input helpers are powered by the plugin Text Mask. Please refer there documentation for further details and instructions here https://github.com/text-mask/text-mask​
Importing
First import it to your app module or any submodule as you wish
1
import { TextMaskModule } from 'angular2-text-mask';
2
@NgModule({
3
imports: [TextMaskModule,...]
4
})
5
export class AppModule(){}
Copied!
How to use
HTML
Typescript
1
<div class="row">
2
<div class="col-lg-6">
3
<h5>
4
Input masks
5
</h5>
6
<p>These assure the user will never enter invalid phone no, email or anything that has a pattern even without validations</p>
7
<br>
8
<div class="form-group">
9
<label>Date</label>
10
<span class="help">e.g. "25/12/2013"</span>
11
<input [textMask]="{mask: mask.date}" type="text" id="date" class="form-control" guide="true">
12
</div>
13
<div class="form-group">
14
<label>Telephone</label>
15
<span class="help">e.g. "(324) 234-3243"</span>
16
<input [textMask]="{mask: mask.telephone}" type="text" id="phone" class="form-control">
17
</div>
18
<div class="form-group">
19
<label>Custom</label>
20
<span class="help">e.g. "23-4324324"</span>
21
<input [textMask]="{mask: mask.custom}" type="text" id="tin" class="form-control">
22
</div>
23
<div class="form-group">
24
<label>Social Security Number</label>
25
<span class="help">e.g. "432-43-2432"</span>
26
<input [textMask]="{mask: mask.ssn}" type="text" id="ssn" class="form-control" placeholder="You can put anything here">
27
</div>
28
</div>
29
<div class="col-lg-6">
30
<h5>Input autonumeric
31
</h5>
32
<p>Do you forget small things? here is something that helps to automatically placed forgotten dollar signs, decimal places and even comma separates and many more!</p>
33
<br>
34
<div class="form-group">
35
<label>Decimal place and comma separator</label>
36
<span class="help">e.g. "53,000.00"</span>
37
<input type="text" [textMask]="{mask: numberMask}" class="autonumeric form-control">
38
</div>
39
<div class="form-group">
40
<label>Weird way but works</label>
41
<span class="help">e.g. "45.000,00"</span>
42
<input type="text" [textMask]="{mask: wierdMask}" class="autonumeric form-control">
43
</div>
44
<div class="form-group">
45
<label>Dollar prefix</label>
46
<span class="help">e.g. "$45.50"</span>
47
<input type="text" [textMask]="{mask: dollarPrefix}" class="autonumeric form-control">
48
</div>
49
<div class="form-group">
50
<label>Range</label>
51
<span class="help">e.g. "0 - 9,999"</span>
52
<input type="text" [textMask]="{mask: range}" class="autonumeric form-control">
53
</div>
54
</div>
55
</div>
Copied!
1
//Input Examples Masks
2
mask = {
3
date : [/[1-9]/, /\d/,'/', /\d/, /\d/,'/', /\d/, /\d/, /\d/, /\d/],
4
telephone:['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
5
custom:[/[1-9]/, /\d/,'-', /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/],
6
ssn:[/[1-9]/, /\d/, /\d/,'-', /\d/, /\d/,'-', /\d/, /\d/, /\d/, /\d/],
7
}
8
numberMask = createNumberMask({
9
prefix: '$ ',
10
suffix: ''
11
});
12
wierdMask = createNumberMask({
13
prefix: '',
14
suffix: '',
15
thousandsSeparatorSymbol:'.',
16
allowDecimal:true,
17
decimalSymbol:','
18
});
19
dollarPrefix = createNumberMask({
20
prefix: '$ ',
21
suffix: '',
22
allowDecimal:true
23
});
24
range = createNumberMask({
25
prefix: '',
26
suffix: '',
27
integerLimit:4
28
});
Copied!
​
Last modified 4yr ago
Copy link