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.
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.
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.
SlotChar #
Default placeholder for a mask is underscore that can be customized using slotChar property.
Filled #
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
Float Label #
FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.
Ifta Label #
IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
Clear Icon #
When showClear is enabled, a clear icon is displayed to clear the value.
Sizes #
InputMask provides small and large sizes as alternatives to the base.
Fluid #
The fluid prop makes the component take up the full width of its container when set to true.
Disabled #
When disabled is present, the element cannot be edited and focused.
Invalid #
The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with Angular Forms.
Forms #
Template Driven #
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.
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 ariaLabelledBy, ariaLabel props.
<label for="date">Date</label>
<p-inputmask inputId="date"/>
<span id="phone">Phone</span>
<p-inputmask ariaLabelledBy="phone"/>
<p-inputmask ariaLabel="Age"/>Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
