Angular TextBox - Specify a Mask for the Input

A mask defines a pattern for the TextBox value. You can specify the mask using the mask property. 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.

HTML
TypeScript
  • <dx-text-box
  • mask="SFFFFHN"
  • [maskRules]="maskRules">
  • </dx-text-box>
  • import { DxTextBoxModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • 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();
  • }
  • };
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTextBoxModule
  • ],
  • // ...
  • })

The masked value goes to the read-only text property, while its unmasked equivalent goes to the value property.

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

HTML
TypeScript
  • <dx-text-box
  • mask="+1 (200) 000-0000"
  • maskChar="‒">
  • </dx-text-box>
  • import { DxTextBoxModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTextBoxModule
  • ],
  • // ...
  • })

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

HTML
TypeScript
  • <dx-text-box
  • mask="+1 (200) 000-0000"
  • maskInvalidMessage="The input value does not match the mask">
  • </dx-text-box>
  • import { DxTextBoxModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTextBoxModule
  • ],
  • // ...
  • })
See Also