InputMask
InputMask component is used to enter input in a certain format such as numeric, date, currency and phone.
Usage #
Examples #
Basic #
InputMask is used as a controlled input with ngModel properties.
Format Patterns #
Mask format can be a combination of the following definitions; a for alphabetic characters, 9 for numeric characters and * for alphanumberic characters. In addition, formatting characters like ( , ) , - are also accepted.
Optional #
When the input does not complete the mask definition, it is cleared by default. Use autoClear property to control this behavior. In addition, ? is used to mark anything after the question mark optional.
Slot Character #
Default placeholder for a mask is underscore that can be customized using slotChar property.
Unmask #
The onUnmaskedChange event is invoked on every value change and emits the rawValue without the mask formatting characters, so both the masked and raw values can be accessed at the same time.
AutoClear #
When autoClear is set to false, the incomplete value is preserved on blur instead of being cleared.
Filled #
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
Float Label #
FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.
Ifta Label #
IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
Sizes #
InputMask provides small and large sizes as alternatives to the base.
Fluid #
The fluid prop makes the component take up the full width of its container when set to true.
Disabled #
When disabled is present, the element cannot be edited and focused.
Invalid #
The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with Angular Forms.
Forms #
Signal Forms #
Template Driven #
Reactive Forms #
Accessibility #
Screen Reader
InputMask directive is used with a native input element that implicitly includes any passed attribute. Value to describe the component can either be provided via label tag combined with id attribute or using aria-labelledby, aria-label attributes.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the input. |