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 a form is validated.

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.

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

Represents the ElementRef of the visible input element.

Events

blur EventEmitter

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

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

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 { }