InputMask InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.

Import

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';

Getting Started

Component is defined with p-inputMask element and two-way value binding is enabled with standard ngModel directive.


<p-inputMask [(ngModel)]="val"></p-inputMask>

Model Driven Forms

InputMask can be used in a model driven form as well.


<p-inputMask formControlName="age"></p-inputMask>

Mask Types

A mask is defined with the following syntax.

  • 9: numeric
  • a: alphabetical
  • *: alphanumeric

<p-inputMask mask="aaa-99"></p-inputMask>
<p-inputMask mask="999999"></p-inputMask>
<p-inputMask mask="**"></p-inputMask>

Aliases

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>

Regex

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>
            
            

Optional Mask

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>
            
            

Attributes

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.

Events

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

Styling is same as inputtext component, for theming classes visit theming page.

Dependencies

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;
    
}