InputMask

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

Import #


import { InputMaskModule } from 'primeng/inputmask';

Basic #

InputMask is used as a controlled input with ngModel properties.



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

Reactive Forms #

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 #

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>

Slot Char #

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>

Optional #

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>

FloatLabel #

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

SSN



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

Disabled #

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



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

Invalid #

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>

Style #

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.

Accessibility #

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

Key	Function
tab	Moves focus to the input.

InputMask API

API defines helper props, events and others for the PrimeNG InputMask module.

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.
keepBuffer	boolean	false	When present, it specifies that whether to clean buffer value from model.
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
autoFocus	boolean	false	When present, the input gets a focus automatically on load.
showClear	boolean	false	When enabled, a clear icon is displayed to clear the value.
autocomplete	string	null	Used to define a string that autocomplete attribute the current element.
ariaLabel	string	null	Used to define a string that labels the input element.
ariaRequired	boolean	false	Used to indicate that user input is required on an element before a form can be submitted.
title	string	null	Title text of the input text.

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.
onInput	-	Callback to invoke on when the input field value is altered.
onClear	-	Callback to invoke when inputmask clears the value.
onKeydown	event: KeyboardEvent	Callback to invoke on when the input receives a keydown event.

Methods #

Name	Parameters	Description
focus	-	Applies focus to the input.

Templates #

Name	Parameters
clearicon	-