MaskedTextBoxComponent
Represents the Kendo UI MaskedTextBox component for Angular.
@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
disabled
boolean
Determines whether the MaskedTextBox is disabled (see example).
includeLiterals
boolean
(default: false) Indicates whether to include literals in the raw value (see example).
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
(default: true) Determines whether the built-in mask validator is enforced when a form is validated (see example).
prompt
string
(default: _
)
Represents a prompt character for the masked value.
promptPlaceholder
string
(default: ' ') Indicates a character which represents an empty position in the raw value.
readonly
boolean
Determines whether the MaskedTextBox is in its read-only state (see example).
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.
rules
{[key: string]: RegExp}
Exposes the RegExp-based mask validation array (see example).
Fields
input
ElementRef
Represents the ElementRef
of the visible input
element.
Events
blur
EventEmitter<any>
Fires each time the input
element gets blurred.
To wire the event programmatically, use the
onBlur
property.
@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 input
element.
To wire the event programmatically, use the
onFocus
property.
@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.
@Component({
selector: 'my-app',
template: `
<button (click)="maskedinput.focus()">Focus the input</button>
<kendo-maskedtextbox #maskedinput></kendo-maskedtextbox>
`
})
class AppComponent { }