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