The mask attribute is mandatory to use for the input mask. The component not only allows the number type, but it also supports alphabetic and alphanumeric characters, so the mask format can be a combination of the following built-in definitions:
- a: Alphabetic character (A-Z,a-z)
- 9: Numeric character (0-9)
- *: Alphanumeric character (A-Z,a-z,0-9)
Let's take an example where we can show the input mask with different mask options based on a radio button selection, as follows:
<div>
<div id="phoneformat" *ngIf="format == 'Option1'">
<span>Phone:</span>
<p-inputMask mask="(999) 999-9999" [(ngModel)]="phone"
placeholder="(999) 999-9999" name="phone">
</p-inputMask>
</div>
<div id="dateformat" *ngIf="format == 'Option2'">
<span>Date:</span>
<p-inputMask mask="99/99/9999" ...