MaskedTextBoxComponent

Represents the Kendo UI MaskedTextBox component for Angular.

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

class AppComponent {
 public value1: number = 9580128055807792;
 public mask1: string = "0000-0000-0000-0000";
}

Selector

kendo-maskedtextbox

Export Name

Accessible in templates as #kendoMaskedTextBoxInstance="kendoMaskedTextBox"

Inputs

disabled boolean

Determines whether the component is disabled.

includeLiterals boolean (default: false)

Indicates whether to include literals in the raw value.

mask string

Represents the current mask. If no mask is set, the component behaves as a standard type="text" input.

maskValidation boolean (default: true)

Determines whether the built-in mask validator is enforced when validating a form.

prompt string (default: _)

A prompt character for the masked value.

promptPlaceholder string (default: ' ')

A character representing an empty position in the raw value.

readonly boolean

Determines whether the MaskedTextBox is in its read-only state.

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.

Fields

input ElementRef

ElementRef to the visible input element.

Events

blur EventEmitter

Fires each time the input element gets blurred.

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

To wire the event programmatically, use the onBlur property.

focus EventEmitter

Fires each time the user focuses the input element.

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

To wire the event programmatically, use the onFocus property.

valueChange EventEmitter

Fires each time the value changes.

Methods

blur

Blurs the MaskedTextBox component.

focus

Focuses the MaskedTextBox component.

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