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

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.

focus

Focuses the MaskedTextBox.

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