Masks
The MaskedTextBox supports a set of built-in masks.
The supported mask rules are:
-
0—Requires a digit (0-9). -
9—Requires a digit (0-9) or a space. -
#—Requires a digit (0-9), space, plus (+), or minus (-) sign. -
L—Requires a letter (a-Z). -
?—Requires a letter (a-Z) or a space. -
A—Requires an alphanumeric (0-9, a-Z). -
a—Requires an alphanumeric (0-9, a-Z) or a space. -
&—Requires a character (excluding space). -
C—Requires a character or a space.
You can also define custom rules by using the rules property.
Apart from the built-in and custom rules, you can also use static symbols in the mask pattern that are also known as literals. In the masked value, a literal is always rendered on the same position as the position where it is defined in the mask property.
To escape a mask rule, use the slash (
\) character. An escaped rule turns into a literal.
The following example demonstrates how to use the digit-requiring mask (0) and the literal (-) of the MaskedTextBox.
@Component({
selector: 'my-app',
template: `
<kendo-maskedtextbox
[value]="value"
[mask]="mask">
</kendo-maskedtextbox>
`
})
class AppComponent {
public value: string = "5748-1570-0019-4334";
public mask: string = "0000-0000-0000-0000";
}The following example demonstrates how to extend the available mask rules.
@Component({
selector: 'my-app',
template: `
<div class="example-config">
<p>{{ mask }}</p>
<ul>
<li>Y - cyrillic only</li>
<li>L - latin only</li>
</ul>
</div>
<kendo-maskedtextbox
[value]="value"
[mask]="mask"
[rules]="rules">
</kendo-maskedtextbox>
`
})
class AppComponent {
public value: string = "абвг abcd";
public mask: string = "YYYY LLLL";
public rules: { [key: string]: RegExp } = {
"L": /[a-zA-Z]/,
"Y": /[\u0400-\u0481\u048A-\u04FF]/
};
}