All Components

MaskedTextBox Overview

The MaskedTextBox uses a mask to control the input of the user.

Basic Usage

The following example demonstrates the MaskedTextBox in action.

@Component({
    selector: 'my-app',
    template: `
        <p>Enter phone number</p>
        <kendo-maskedtextbox [mask]="mask" [value]="value"></kendo-maskedtextbox>
    `
})

class AppComponent {
    public value: string = "359884123321";
    public mask: string = "(999) 000-00-00-00";
}

Configuration

The MaskedTextBox provides configuration options for:

Set the Masks

The MaskedTextBox supports the following masks:

  • 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.

The following example demonstrates how to use the digit-requiring mask (0) of the component.

@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";
}

You can extend the available masks by modifying the rules property of the component.

@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]/
    };
}

Disable User Interaction

The MaskedTextBox allows you to disable any user interaction with the component. By default, the component is enabled and the disabled property is set to false.

@Component({
    selector: 'my-app',
    template: `
        <kendo-maskedtextbox
          [value]="value"
          [mask]="mask"
          [disabled]="disabled"
        ></kendo-maskedtextbox>
    `
})

class AppComponent {
    public value: string = "Andrew Green";
    public mask: string = "aaaaaaaaaaaaaaaaa";
    public disabled: boolean = true;
}

For detailed information on the configuration of the MaskedTextBox, refer to its client-side API documentation.

Validation

The MaskedTextBox features a built-in mask validator. It ensures that the user submits a valid input.

@Component({
    selector: 'my-app',
    template: `
        <form #templateForm="ngForm" novalidate>
            <p>Enter valid postcode (xx xxx)</p>
            <kendo-maskedtextbox
                name="value1"
                [(ngModel)]="value"
                [mask]="mask"
                [maskValidation]="maskValidation"
            ></kendo-maskedtextbox>
            <button [disabled]="!templateForm.valid" type="submit" class="k-button">Submit</button>
        </form>
    `
})

class AppComponent {
    public value: string = "Andrew Green";
    public mask: string = "99 999";
    public disabled: boolean = true;
    public maskValidation: boolean = true;

}

Forms Support

It is possible to use the MaskedTextBox in reactive forms.

Reactive Forms

The FormGroup provides a way to render reactive forms. For more details, refer to the Angular Documentation.

The following example demonstrates how to use the MaskedTextBox in a reactive form.

import {
       FormsModule,
       ReactiveFormsModule,
       FormGroup,
       FormBuilder
   } from '@angular/forms';

   @Component({
       selector: 'my-app',
       template: `
           <div class="example-config">
               Question mark (?) is a placeholder for a letter or a space.
           </div>
           <form [formGroup]="form" #reactiveForm="ngForm">
               <kendo-maskedtextbox formControlName="masked" [mask]="'??????????'"></kendo-maskedtextbox> <br />
               <p *ngIf="form.controls.masked.errors">{{form.controls.masked.errors | json}}</p>
           </form>
       `
   })
   class AppComponent {
       public form: FormGroup;
       constructor(private formBuilder: FormBuilder) {
           this.form = this.formBuilder.group({
               masked: ["John"]
           });
       }
   }

Accessibility

For more information on the accessibility features of the MaskedTextBox, refer to the article on accessibility.

In this article