Angular InputMask component is used to enter input in a certain format such as numeric, date, currency and phone.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {InputMaskModule} from 'primeng/inputmask';
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>
Theming
InputMask supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG InputMask showcase for demos and documentation.