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.
- <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 option, while its unmasked equivalent goes to the value option. If you use jQuery, you can get the value of either of these options using the option(optionName) method.
- const maskedValue = $("#textBoxContainer").dxTextBox("option", "text");
- const 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.
- <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 option.
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.