InputMask

The InputMask control uses a mask to validate input as the user types. It prevents users from accidentally entering invalid data and formats the input as it is typed.

The mask is specified by the mask property as a string composed of one or more of the following masking characters:

0
Digit.
9
Digit or space.
#
Digit, sign, or space.
L
Letter.
l
Letter or space.
A
Alphanumeric.
a
Alphanumeric or space.
.
Localized decimal point.
,
Localized thousand separator.
:
Localized time separator.
/
Localized date separator.
$
Localized currency symbol.
<
Converts characters that follow to lowercase.
>
Converts characters that follow to uppercase.
|
Disables case conversion.
\
Escapes any character, turning it into a literal.
All others
Literals.

These samples use the WjInputMask component and Angular 2.

Phone number
Credit Card number
Social Security number
ZIP Code
UK/Canada Postal Code

In some cases, you may want to get or set the InputMask value excluding the literal and prompt characters. You can do this using the rawValue property as shown below:

Phone number:

Mask: {{inputMaskRaw.mask}}

Value: {{inputMaskRaw.value}}

RawValue: {{inputMaskRaw.rawValue}}

Masked InputDate and InputTime

The InputDate and InputTime controls have a mask property that can make data entry easier in some cases.

InputDate with mask
InputTime with mask