Input Mask

Angular Bootstrap 5 Input Mask plugin

The Input Mask is a custom directive which allows to set a predefined format of forms.

Note: Read the API tab to find all available options and advanced customization

Basic example

Input Mask comes with three predefined masks directives:

• a - Alpha characters (defaut: A-Z,a-z)
• 9 - Numeric characters (0-9)
• * - Alphanumeric characters (A-Z,a-z,0-9)

To initialize Input Mask on element add mdbInputMask directive passing the mask format string to said directive.

Clear incomplete

By default, Input Mask will clear incomplete input value on blur. Turn this behavior off with [clearIncomplete]="false".

Custom mask

Define custom mask with [customMask] for mask symbol and [customValidator] with custom mask regex pattern. Example below will only allow abc letters to be typed for p mask.

You can also set more than one mask by passing multiple characters separated by comma to [customMask], and their coresponding validators separated by comma to [customValidator]

Special characters

Input Mask allows any non alphanumeric character to be used inside the mdbInputMask directive. Those characters will be hardcoded into the input during typing

Mask placeholder

Set placeholder for mask while typing with [maskPlaceholder]="true". Default placeholder is an underscore sign _. Change it with [charPlaceholder] input. You can use single character or define placeholder for whole mask

Phone number input mask

Input mask can be used with Autocomplete to create an international phone number input. When user selects a country, input mask will be updated with mask pattern used in selected country. Please remember to import MdbAutocompleteModule for this example.