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.

InputMask #

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

Properties #

Defines the input properties of the component.

name	type	default	description
type	string	text	HTML5 input type.
slotChar	string	_	Placeholder character in mask, default is underscore.
autoClear	boolean	true	Clears the incomplete value on blur.
showClear	boolean	false	When enabled, a clear icon is displayed to clear the value.
style	Object	null	Inline style of the input field.
inputId	string	null	Identifier of the focus input to match a label defined for the component.
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	string	null	Specifies tab order of the element.
title	string	null	Title text of the input text.
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.
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.
unmask	boolean	false	Defines if ngModel sets the raw unmasked value to bound value or the formatted mask value.
name	string	null	Name of the input field.
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.
autocomplete	string	null	Used to define a string that autocomplete attribute the current element.
keepBuffer	boolean	false	When present, it specifies that whether to clean buffer value from model.
mask	string	null	Mask pattern.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onComplete	value : any	Callback to invoke when the mask is completed.
onFocus	event : Event	Callback to invoke when the component receives focus.
onBlur	event : Event	Callback to invoke when the component loses focus.
onInput	event : Event	Callback to invoke on input.
onKeydown	event : Event	Callback to invoke on input key press.
onClear	value : any	Callback to invoke when input field is cleared.

Templates #

Defines the templates used by the component.

name	parameters	description
clearicon	-	Custom clear icon template.