Mask format options

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" [(ngModel)]="date" 
      placeholder="99/99/9999" name="date">
    </p-inputMask>
  </div>
  <div id="serialformat" *ngIf="format == 'Option3'">
    <span>Serial Number:</span>
    <p-inputMask mask="a*-999-a999" [(ngModel)]="serial" 
      placeholder="a*-999-a999" name="serial">
    </p-inputMask>
  </div>
</div>

As per the preceding example, only one input element will be displayed with the defined mask. The following screenshot shows a snapshot result of the mask format for a date: