• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Inputs / API / MaskedTextBoxComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

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

NameTypeDefaultDescription

disabled

boolean

Determines whether the MaskedTextBox is disabled (see example). To learn how to disable the component in reactive forms, refer to the article on Forms Support.

fillMode

InputFillMode

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

  • flat
  • solid (default)
  • outline
  • none

includeLiterals

boolean

false

Indicates whether to include literals in the raw value (see example).

inputAttributes

{[key: string]: string}

Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.

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

true

Determines whether the built-in mask validator is enforced when a form is validated (see example).

prompt

string

_

Represents a prompt character for the masked value.

promptPlaceholder

string

' '

Indicates a character which represents an empty position in the raw value.

readonly

boolean

false

Determines whether the MaskedTextBox is in its read-only state (see example).

rounded

InputRounded

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

  • small
  • medium (default)
  • large
  • none

rules

{[key: string]: RegExp}

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

size

InputSize

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

  • small
  • medium (default)
  • large
  • none

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.

Fields

NameTypeDefaultDescription

input

ElementRef<any>

Represents the ElementRef of the visible input element.

Events

NameTypeDescription

inputBlur

EventEmitter<any>

Fires each time the input element gets blurred.

inputFocus

EventEmitter<any>

Fires each time the user focuses the input element.

blur

EventEmitter<any>

Fires each time the MaskedTextBox component 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 MaskedTextBox component.

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

In this article

Not finding the help you need?

Contact Support