How can I help you?
Mask configuration in Angular Maskedtextbox component
26 Feb 20269 minutes to read
The mask is a combination of standard and custom mask elements that validates the user input based on its behavior.
When the mask value is empty, the MaskedTextBox behaves as an input element with text type.
Standard mask elements
The following table shows the list of mask elements and its behavior based on MSDN standard.
The mask can be formed by combining any one or more of these mask elements.
| Mask Element | Description |
|---|---|
| 0 | Digit required (0-9). |
| 9 | Digit or space, optional. |
| # | Digit, space, plus, or minus sign, optional. |
| L | Letter required (a-z, A-Z). |
| ? | Letter or space, optional. |
| & | Character required. |
| C | Character or space, optional. |
| A | Alphanumeric (A-Za-z0-9) required. |
| a | Alphanumeric (A-Za-z0-9) or space, optional. |
| < | Shift down (convert to lowercase). |
| > | Shift up (convert to uppercase). |
| | | Disable previous shift up or down. |
| \\ | Escape character (literal mask character). |
| All other characters | Literal characters displayed as-is in the MaskedTextBox. |
The following example demonstrates the usage of standard mask elements.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'
import { Component } from '@angular/core';
@Component({
imports: [
MaskedTextBoxModule, FormsModule
],
standalone: true,
selector: 'app-root',
// sets different types of standard masks to the MaskedTextBox component
template: `
<div class='wrap'>
<ejs-maskedtextbox mask='#####' placeholder='Mask ##### (ex: 012+-)' floatLabelType= 'Always'></ejs-maskedtextbox>
</div>
<div class='wrap'>
<ejs-maskedtextbox mask='LLLLLL' placeholder='Mask LLLLLL (ex: Sample)' floatLabelType= 'Always'></ejs-maskedtextbox>
</div>
<div class='wrap'>
<ejs-maskedtextbox mask='&&&&&' placeholder='Mask &&&&& (ex: A12@#)' floatLabelType= 'Always'></ejs-maskedtextbox>
</div>
<div class='wrap'>
<ejs-maskedtextbox mask='>LLL<LLL' placeholder='Mask >LLL<LL (ex: SAMple)' floatLabelType= 'Always'></ejs-maskedtextbox>
</div>
<div class='wrap'>
<ejs-maskedtextbox mask='\\A999' placeholder='Mask \\A999 (ex: A321)' floatLabelType= 'Always'></ejs-maskedtextbox>
</div>`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Custom mask elements
Other than the above standard mask elements, the mask can be configured with the custom characters or regular expression to define a custom behavior.
Custom characters
You can define any of the non-mask element as the mask element and its behavior through the customCharacters property.
In the following example, non-mask element P accepts the values P, A, p, a and M accepts the values M, m as mentioned in the custom characters collection.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'
import { Component } from '@angular/core';
@Component({
imports: [
MaskedTextBoxModule, FormsModule
],
standalone: true,
selector: 'app-root',
// sets mask format to the MaskedTextBox
template: `
<ejs-maskedtextbox [customCharacters]="customMaskChar" mask='00:00 >PM' placeholder='Time (ex: 10:00 PM, 10:00 AM)' floatLabelType= 'Always'></ejs-maskedtextbox>
`
})
export class AppComponent {
// sets custom characters collection for non-mask elements 'P' and 'M'
public customMaskChar: Object = { P: 'P,A,p,a', M: 'M,m'};
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Regular expression
Instead of the mask element, you can define your own regular expression to validate the input of a particular input place.
The regular expressions should be wrapped by the square brackets (e.g., [Regex]).
In the following example, regular expression has been set for each input places.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { Component } from '@angular/core';
@Component({
imports: [
MaskedTextBoxModule
],
standalone: true,
selector: 'app-root',
// sets set of regular expression for each input place as mask
template: `
<ejs-maskedtextbox name="mask_value" #mask="" mask='[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]' placeholder='IP Address (ex: 212.212.111.222)' floatLabelType= 'Always'></ejs-maskedtextbox>
`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Prompt character
The Prompt character is a prompting symbol in the MaskedTextBox for the mask elements. The symbol is used to show the input positions in the MaskedTextBox.
You can customize the prompt character of MaskedTextBox by using the promptChar property.
The following example demonstrates the MaskedTextBox with customized prompt character as *.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'
import { Component } from '@angular/core';
@Component({
imports: [
MaskedTextBoxModule, FormsModule
],
standalone: true,
selector: 'app-root',
// sets the prompting symbol to the MaskedTextBox
// sets mask format to the MaskedTextBox
template: `
<ejs-maskedtextbox promptChar="#" mask='999-999-9999'></ejs-maskedtextbox>
`
})
export class AppComponent {
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));