DevExtreme Angular - Specify a Mask for the Input

A mask defines a pattern for the TextBox value. You can specify the mask using the mask option. A mask can contain the following elements.

Masking Element Description
0 A digit.
9 A digit or a space.
# A digit, a space, "+" or "-" sign.
L A literal.
C Any character except space.
c Any character.
A An alphanumeric.
a An alphanumeric or a space.

You can also define custom masking elements using the maskRules object. Each field of this object defines a single masking element.

JavaScript
  • $(function() {
  • $("#textBoxContainer").dxTextBox({
  • mask: "SFFFFHN",
  • maskRules: {
  • // a single character
  • 'S': '$',
  •  
  • // a regular expression
  • 'H': /[0-9A-F]/,
  •  
  • // an array of characters
  • 'N': ['$', '%', '&', '@'],
  •  
  • // a function
  • 'F': function (char) {
  • return char == char.toUpperCase();
  • }
  • }
  • });
  • });

The masked value goes to the read-only text option, while its unmasked equivalent goes to the value option. You can get the value of either of these options using the option(optionName) method.

JavaScript
  • var maskedValue = $("#textBoxContainer").dxTextBox("option", "text");
  • var unmaskedValue = $("#textBoxContainer").dxTextBox("option", "value");

By default, the widget uses underscores to designate blanks in the masked value. You can specify another symbol using the maskChar option.

JavaScript
  • $(function() {
  • $("#textBoxContainer").dxTextBox({
  • mask: "+1 (200) 000-0000",
  • maskChar: "‒"
  • });
  • });

If the input value does not match the mask, the TextBox displays an error message specified by the maskInvalidMessage option.

JavaScript
  • $(function() {
  • $("#textBoxContainer").dxTextBox({
  • mask: "+1 (200) 000-0000",
  • maskInvalidMessage: "The input value does not match the mask"
  • });
  • });
See Also