InputMask is based on jquery mask plugin so include the inputmask bundle script in your application and then import the component from PrimeNG.
import {InputMaskModule} from 'primeng/primeng';
Component is defined with p-inputMask element and two-way value binding is enabled with standard ngModel directive.
<p-inputMask [(ngModel)]="val"></p-inputMask>
InputMask can be used in a model driven form as well.
<p-inputMask formControlName="age"></p-inputMask>
A mask is defined with the following syntax.
<p-inputMask mask="aaa-99"></p-inputMask>
<p-inputMask mask="999999"></p-inputMask>
<p-inputMask mask="**"></p-inputMask>
An alis is a shortcut for commonly used masks such as dates and numbers.
<p-inputMask alias="date"></p-inputMask>
<p-inputMask alias="currency"></p-inputMask>
<p-inputMask alias="email"></p-inputMask>
<p-inputMask alias="integer"></p-inputMask>
<p-inputMask alias="date"></p-inputMask>
<p-inputMask alias="datetime"></p-inputMask>
<p-inputMask alias="dd/mm/yyyy"></p-inputMask>
An alias is configured using options property. Each alias can have a different set of options. For full list of options please refer to extensions documentation.
<p-inputMask alias="decimal" [options]="{groupSeparator:',',autoGroup:true}"></p-inputMask>
A regular expression can be used as a mask as well by defining an alias as "regex" and providing the expression in options.
<p-inputMask alias="regex" [options]="{regex: '[0-9]*'}" placeholder="Regex (Integer only)"></p-inputMask>
Certain parts of a mask can be optional with [] syntax. In following example values like 143 or 14 are accepted.
<p-inputMask mask="99[9]"></p-inputMask>
Name | Type | Default | Description |
---|---|---|---|
mask | string | null | Mask pattern. |
style | string | null | Inline style of the input field. |
styleClass | string | null | Style class of the input field. |
placeholder | string | null | Advisory information to display on input. |
slotChar | string | _ | Placeholder character in mask, default is underscore. |
alias | string | null | Shorthand for a predefined mask. |
options | Object | null | Configuration for mask alias. |
unmask | boolean | false | Defines if ngModel sets the raw unmasked value to bound value or the formatted mask value. |
clearMaskOnLostFocus | boolean | false | Remove the empty mask on blur or when not empty removes the optional trailing part. Default is true. |
clearIncomplete | boolean | false | Clears the incomplete input on blur. |
disabled | boolean | false | When present, it specifies that the element should be disabled. |
disabled | boolean | false | When present, it specifies that the element value cannot be altered. |
size | number | null | Size of the input field. |
maxlength | number | null | Maximum number of character allows in the input field. |
Name | Parameters | Description |
---|---|---|
onComplete | - | Callback to invoke on when user completes mask pattern. |
onInComplete | Callback to invoke on when user leaves the field without completing mask pattern. |
Styling is same as inputtext component, for theming classes visit theming page.
jQuery input mask plugin.
<div class="ui-g ui-fluid">
<div class="ui-g-12 ui-md-6 ui-lg-4">
<p-inputMask mask="99-999999" [(ngModel)]="val1" placeholder="99-999999"></p-inputMask>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<p-inputMask alias="datetime" [(ngModel)]="val2" placeholder="DateTime"></p-inputMask>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<p-inputMask alias="numeric" [options]="{groupSeparator:'',digits:2,prefix:'$',digitsOptional:false,autoGroup:true}" [(ngModel)]="val3" placeholder="Currency" slotChar="0"></p-inputMask>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<p-inputMask alias="decimal" [options]="{groupSeparator:',',autoGroup:true}" [(ngModel)]="val4" placeholder="Decimal"></p-inputMask>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<p-inputMask alias="regex" [options]="{regex: '[0-9]*'}" placeholder="Regex (Integer only)"></p-inputMask>
</div>
<div class="ui-g-12 ui-md-6 ui-lg-4">
<p-inputMask mask="*{1,20}@*{1,20}.*{1,3}" placeholder="Email"></p-inputMask>
</div>
</div>
export class InputMaskDemo {
val1: string;
val2: string;
val3: string;
val4: string;
val5: string;
val6: string;
}