MaskedTextBoxComponent

Represents the Kendo UI MaskedTextBox component for Angular.

Copy Code
@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

Determines whether the MaskedTextBox is disabled (see example).

includeLiterals

(default: false) Indicates whether to include literals in the raw value (see example).

mask

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

Specifies if the mask should be shown on focus for empty value.

maskValidation

(default: true) Determines whether the built-in mask validator is enforced when a form is validated (see example).

prompt

(default: _) Represents a prompt character for the masked value.

promptPlaceholder

(default: ' ') Indicates a character which represents an empty position in the raw value.

readonly

Determines whether the MaskedTextBox is in its read-only state (see example).

tabindex

Specifies the tabindex of the component.

title

Sets the title of the input element.

value

Provides a value for the MaskedTextBox.

rules

Exposes the RegExp-based mask validation array (see example).

Fields

input

Represents the ElementRef of the visible input element.

Events

blur

Fires each time the input element gets blurred.

To wire the event programmatically, use the onBlur property.

Copy Code@Component({
selector: 'my-app',
template: `
 <kendo-maskedtextbox (blur)="handleBlur()"></kendo-maskedtextbox>
`
})
class AppComponent {
  public handleBlur(): void {
     console.log("Component is blurred");
  }
}

focus

Fires each time the user focuses the input element.

To wire the event programmatically, use the onFocus property.

Copy Code@Component({
selector: 'my-app',
template: `
 <kendo-maskedtextbox (focus)="handleFocus()"></kendo-maskedtextbox>
`
})
class AppComponent {
  public handleFocus(): void {
     console.log("Component is focused");
  }
}

valueChange

Fires each time the value changes.

Methods

blur

Blurs the MaskedTextBox.

focus

Focuses the MaskedTextBox.

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