MaskedTextBoxComponent

Represents the Kendo UI MaskedTextBox component for Angular.

typescript

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

@Component({
  selector: 'my-app',
  template: `
    <kendo-maskedtextbox
      [mask]="mask"
      [value]="value">
    </kendo-maskedtextbox>
  `
})
export class AppComponent {
  public value: string = "9580128055807792";
  public mask: string = "0000-0000-0000-0000";
}

Selector

kendo-maskedtextbox

Export Name

Accessible in templates as #kendoMaskedTextBoxInstance="kendoMaskedTextBox"

Inputs

Name	Type	Default	Description
disabled	boolean	false	Disables the MaskedTextBox when you set it to true (see example). To disable the component in reactive forms, see Forms Support.
fillMode	InputFillMode	'solid'	Sets the background and border style of the MaskedTextBox (see example).
includeLiterals	boolean	false	When true includes literals in the raw value (see example).
inputAttributes	{[key: string]: string}		Sets HTML attributes for the inner input element. You cannot change attributes that are essential for component functionality.
mask	string		Sets the mask pattern for the MaskedTextBox (see example). If you do not set a mask, the component acts as a standard type="text" input. If the mask allows spaces, set the promptPlaceholder to a character that the mask does not accept.
maskOnFocus	boolean		Shows the mask on focus when the value is empty.
maskValidation	boolean	true	Enables the built-in mask validator when you set it to true (see example).
prompt	string	_	Sets the prompt character for the masked value.
promptPlaceholder	string	' '	Sets the character that represents an empty position in the raw value.
readonly	boolean	false	When true, sets the MaskedTextBox to read-only mode (see example).
rounded	InputRounded	'medium'	Sets the border radius of the MaskedTextBox (see example).
rules	{[key: string]: RegExp}		Sets the RegExp-based mask validation rules (see example).
size	InputSize	'medium'	Sets the padding size of the MaskedTextBox input element (see example).
tabindex	number		Sets the tabindex attribute of the component.
title	string		Sets the title attribute of the input element.
value	string		Sets the value of the MaskedTextBox.

Fields

Name	Type	Default	Description
input	ElementRef<any>		Returns the ElementRef of the visible input element.

Events

Name	Type	Description
inputBlur	EventEmitter<any>	Fires when the input element gets blurred.
inputFocus	EventEmitter<any>	Fires when the input element gets focused.
blur	EventEmitter<any>	Fires when the MaskedTextBox gets blurred. To subscribe programmatically, use the onBlur property.
focus	EventEmitter<any>	Fires when the MaskedTextBox gets focused. To subscribe programmatically, use the onFocus property.
valueChange	EventEmitter<string>	Fires when the value changes.

Methods

blur
Blurs the MaskedTextBox.

focus
Focuses the MaskedTextBox. ts @Component({ selector: 'my-app', template: ` <button (click)="maskedinput.focus()">Focus the input</button> <kendo-maskedtextbox #maskedinput></kendo-maskedtextbox> ` }) class AppComponent { }