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