DEV Community

Cover image for Angular InputMask

Angular InputMask

primetek profile image PrimeTek ・2 min read

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


Refer to PrimeNG setup documentation for download and installation steps for your environment.


import {InputMaskModule} from 'primeng/inputmask';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode


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>
Enter fullscreen mode Exit fullscreen mode

You can also define your own regex pattern for alpha character

<p-inputMask [(ngModel)]="val" mask="99-aa" characterPattern="[А-Яа-я]"></p-inputMask>
Enter fullscreen mode Exit fullscreen mode


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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode


InputMask supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.


Visit the PrimeNG InputMask showcase for demos and documentation.

Discussion (0)

Editor guide