MaskedTextBoxComponent

Represents the Kendo UI MaskedTextBox component for Angular.

ts

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

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		Determines whether the MaskedTextBox is disabled (see example). To learn how to disable the component in reactive forms, refer to the article on Forms Support.
fillMode	InputFillMode		The fillMode property specifies the background and border styles of the MaskedTexBox (see example). The possible values are: flat solid (default) outline none
includeLiterals	boolean	false	Indicates whether to include literals in the raw value (see example).
inputAttributes	{[key: string]: string}		Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
mask	string		Represents the current mask (see example). If no mask is set, the component behaves as a standard type="text" input. If the mask allows for spaces, set the promptPlaceholder to a character that is not accepted by the mask.
maskOnFocus	boolean		Specifies if the mask should be shown on focus for empty value.
maskValidation	boolean	true	Determines whether the built-in mask validator is enforced when a form is validated (see example).
prompt	string	_	Represents a prompt character for the masked value.
promptPlaceholder	string	' '	Indicates a character which represents an empty position in the raw value.
readonly	boolean	false	Determines whether the MaskedTextBox is in its read-only state (see example).
rounded	InputRounded		The rounded property specifies the border radius of the MaskedTextBox (see example). The possible values are: small medium (default) large none
rules	{[key: string]: RegExp}		Exposes the RegExp-based mask validation array (see example).
size	InputSize		The size property specifies the padding of the MaskedTextBox internal input element (see example). The possible values are: small medium (default) large none
tabindex	number		Specifies the tabindex of the component.
title	string		Sets the title of the input element.
value	string		Provides a value for the MaskedTextBox.

Fields

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

Events

Name	Type	Description
inputBlur	EventEmitter<any>	Fires each time the input element gets blurred.
inputFocus	EventEmitter<any>	Fires each time the user focuses the input element.
blur	EventEmitter<any>	Fires each time the MaskedTextBox component gets blurred. To wire the event programmatically, use the onBlur property. ts @Component({ selector: 'my-app', template: ` <kendo-maskedtextbox (blur)="handleBlur()"></kendo-maskedtextbox> ` }) class AppComponent { public handleBlur(): void { console.log("Component is blurred"); } }
focus	EventEmitter<any>	Fires each time the user focuses the MaskedTextBox component. To wire the event programmatically, use the onFocus property. ts @Component({ selector: 'my-app', template: ` <kendo-maskedtextbox (focus)="handleFocus()"></kendo-maskedtextbox> ` }) class AppComponent { public handleFocus(): void { console.log("Component is focused"); } }
valueChange	EventEmitter<string>	Fires each time 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 { }