InputMask

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


import { InputMaskModule } from 'primeng/inputmask';

InputMask is used as a controlled input with ngModel properties.



<p-inputMask mask="99-999999" [(ngModel)]="value" placeholder="99-999999"></p-inputMask>

InputMask can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.



<p-inputMask mask="99-999999" [(ngModel)]="value" placeholder="99-999999"></p-inputMask>

Mask format can be a combination of the following definitions; a for alphabetic characters, 9 for numeric characters and * for alphanumberic characters. In addition, formatting characters like ( , ) , - are also accepted.

SSN
Phone
Serial Number


<span class="font-bold block mb-2">SSN</span>
<p-inputMask mask="999-99-9999" [(ngModel)]="value1" placeholder="999-99-9999"></p-inputMask>

<span class="font-bold block mb-2">Phone</span>
<p-inputMask mask="(999) 999-9999" [(ngModel)]="value2" placeholder="(999) 999-9999"></p-inputMask>

<span class="font-bold block mb-2">Serial Number</span>
<p-inputMask mask="a*-999-a999" [(ngModel)]="value3" placeholder="a*-999-a999"></p-inputMask>

Default placeholder for a mask is underscore that can be customized using slotChar property.



<p-inputMask [(ngModel)]="value" mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>

When the input does not complete the mask definition, it is cleared by default. Use autoClear property to control this behavior. In addition, ? is used to mark anything after the question mark optional.



<p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="value" placeholder="(999) 999-9999? x99999"></p-inputMask>

A floating label appears on top of the input field when focused.



<span class="p-float-label">
    <p-inputMask mask="999-99-9999" [(ngModel)]="value" id="ssn_input"></p-inputMask>
    <label htmlFor="ssn_input">SSN</label>
</span>

When disabled is present, the element cannot be edited and focused.



<p-inputMask mask="999-99-9999" [(ngModel)]="value" [disabled]="true"></p-inputMask>

Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.



<p-inputMask mask="999-99-9999" [(ngModel)]="value" class="ng-invalid ng-dirty"></p-inputMask>

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

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Screen Reader

InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.


<label for="date">Date</label>
<p-inputMask id="date"></p-inputMask>

<span id="phone">Phone</span>
<p-inputMask aria-labelledby="phone"></p-inputMask>

<p-inputMask aria-label="Age"></p-inputMask>

Keyboard Support

KeyFunction
tabMoves focus to the input.