Formatted input with InputMask

InputMask is a special kind of input component that minimizes the chances for the user to input incorrect data. It applies flexible validation with the provided masking template. This is especially useful to enter input in a certain format, such as numeric, alphanumeric, date, currency, email, and phone. A basic example of an InputMask component for a phone number input would be as follows:

<p-inputMask id="basic" name="basic" mask="99-999999"    
  [(ngModel)]="simple" placeholder="99-999999"/>

As per the preceding example, the mask value (999) 999-9999 depicts that only a number can be input along with the parenthesis and dashed structure. Due to the usage of the placeholder with the same mask value, it suggests the kind of input format that needs to be provided. The initial display of the input looks as follows:

Once the input gets the focus, the numbers in the mask format will be replaced with an empty space and the other characters will remain in the initial phase. The default placeholder character for mask is underscore (_), so it will display underscore characters for each number digit. After each keyPress event, the mask character (that is, 9) will be filled up with the actual character. If the provided input is incomplete or blurred, then the entire input will be cleared out automatically (by default, autoClear is true).

There are cases to do certain functionalities during the event occurrence in the component's DOM tree. The inputMask component supports the onComplete callback to invoke when the user completes the mask pattern. For example, the user would be notified when the mask input completes as follows:

The growl message appears at the top of the page with the close icon, which allows us to remove the sticky notification at any point in time.