DEV Community

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

Setup

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

Import

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

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

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

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.

Discussion (0)

pic
Editor guide