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.

fillMode

The fillMode property specifies the background and border styles of the MaskedTexBox (see example). The possible values are:

• flat
• solid (default)
• outline
• none

rounded

The rounded property specifies the border radius of the MaskedTextBox (see example). The possible values are:

• small
• medium (default)
• large
• none

rules

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

size

The size property specifies the padding of the MaskedTextBox internal input element (see example). The possible values are:

• small
• medium (default)
• large
• none

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