InputMask InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.
Basic
SSN
Date
Phone
Phone Ext
Serial Number

Import


import {InputMaskModule} from 'primeng/inputmas';

Getting Started

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


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

Mask

Mask format can be a combination of the the following built-in definitions.

  • a - Alpha character (defaut: A-Z,a-z)
  • 9 - Numeric character (0-9)
  • * - Alpha numberic character (A-Z,a-z,0-9)

<p-inputMask [(ngModel)]="val" mask="a*-999-a999"></p-inputMask>

You can also define your own regex pattern for alpha character


<p-inputMask [(ngModel)]="val" mask="99-aa" characterPattern="[А-Яа-я]"></p-inputMask>

SlotChar

Underscore is the default placeholder for a mask and this can be customized using slotChart option.


<p-inputMask [(ngModel)]="val" mask="99-9999" slotChar=" "></p-inputMask>

Optional Values

If the input does not complete the mask definition, it is cleared by default. Use autoClear property to control this behavior. In addition, certain part of a mask can be made optional by using ? symbol where anything after the question mark becomes optional.

Model Driven Forms

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


<p-inputMask formControlName="username" mask="(999) 999-9999? x99999"></p-inputMask>

Properties

Name Type Default Description
type string text HTML5 input type
mask string null Mask pattern.
slotChar string _ Placeholder character in mask, default is underscore.
autoClear boolean true Clears the incomplete value on blur.
unmask boolean false Defines if ngModel sets the raw unmasked value to bound value or the formatted mask value.
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.
size number null Size of the input field.
maxlength number null Maximum number of character allows in the input field.
tabindex number null Specifies tab order of the element.
disabled boolean false When present, it specifies that the element value cannot be altered.
readonly boolean false When present, it specifies that an input field is read-only.
name string null Name of the input field.
inputId string null Identifier of the focus input to match a label defined for the component.
required boolean false When present, it specifies that an input field must be filled out before submitting the form.
characterPattern string [A-Za-z] Regex pattern for alpha characters

Events

Name Parameters Description
onFocus event: Browser event Callback to invoke when input receives focus.
onBlur event: Browser event Callback to invoke when input loses focus.
onComplete - Callback to invoke on when user completes the mask pattern.

Styling

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

Dependencies

None.

 View on GitHub 

<div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Basic</span>
        <p-inputMask mask="99-999999" [(ngModel)]="val1" placeholder="99-999999"></p-inputMask>
    </div>
    
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>SSN</span>
        <p-inputMask mask="999-99-9999" [(ngModel)]="val2" placeholder="999-99-9999"></p-inputMask>
    </div>
    
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Date</span>
        <p-inputMask mask="99/99/9999" [(ngModel)]="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>
    </div>
    
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Phone</span>
        <p-inputMask mask="(999) 999-9999" [(ngModel)]="val4" placeholder="(999) 999-9999"></p-inputMask>
    </div>
    
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Phone Ext</span>
        <p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="val5" placeholder="(999) 999-9999? x99999"></p-inputMask>
    </div>
    
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Serial Number</span>
        <p-inputMask mask="a*-999-a999" [(ngModel)]="val6" placeholder="a*-999-a999"></p-inputMask>
    </div>
</div>



export class InputMaskDemo {

    val1: string;

    val2: string;

    val3: string;

    val4: string;

    val5: string;
    
    val6: string;
    
}