Overview

The Angular Input Mask or masked text box is a component that provides an easy and reliable way to collect user input based on a standard mask. It allows you to capture phone numbers, date values, credit card numbers, and other standard format values.

Custom mask

Other than the standard mask elements, any custom character also can be a mask element by defining rules for it.

• Custom mask documentation

Mask input combinations

The Angular Input Mask component allows different mask combinations based on the standard and custom masks. So, you can form different mask formats based on your application scenarios.

• Number, string, and date mask example

Form support and validation

As a form component, the captured value of a masked textbox component proceeds in the raw format when submitting the form.

You can also integrate the form validator plugin to perform any custom validation.

Adornments

The Input Mask control supports custom adornments using the prependTemplate and appendTemplate properties, which allow users to render custom elements like icons, buttons, or dropdowns to enhance user interaction with prefix and suffix elements.

• Adornments example
• Adornments documentation

Angular Input Mask code example

Easily get started with the Angular Input Mask by using a few simple lines of TS code, as demonstrated below. Also explore our Angular Input Mask example, which you how to render and configure the component.

<ejs-maskedtextbox mask="000-000-0000"></ejs-maskedtextbox>

import { Component} from '@angular/core';

@Component({
  selector: 'app-root',
// sets mask format to the MaskedTextBox
    template: `
        <ejs-maskedtextbox mask='000-000-0000'></ejs-maskedtextbox>
        `
})
export class AppComponent {
constructor() {
}
}