Value

The MaskedTextBox enables you to format its masked (visible) value by setting value.

The configuration is based on the following properties:

• mask—The current mask pattern of the component.
• prompt—The character used for the unfilled parts of the mask.

As a result, the masked value is formatted when the user interacts with the component by pasting or typing in the input field. The value property is recomputed and uses the following configuration:

• promptPlaceholder—The character you can use to replace the prompt character from the masked value in the value. By default, it is an empty string. The default approach facilitates the persisting of the unfilled parts of the mask in the extracted value.
• includeLiterals—The property that indicates whether to include literals in the value of the component. By default, includeLiterals does not include literals.

The formatting of the MaskedTextBox value triggers the valueChange event.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <input id="ac" type="checkbox" [(ngModel)]="includeLiterals">
            <label for="ac">Include literals in the value</label>
        </div>
        <div class="example-wrapper">
            <kendo-maskedtextbox
              [includeLiterals]="includeLiterals"
              [(value)]="value"
              [mask]="mask">
            </kendo-maskedtextbox>
            Component value: {{value}}
        </div>
    `
})

class AppComponent {
    public includeLiterals: boolean = false;
    public value: string = "5748157000194334";
    public mask: string = "0000-0000-0000-0000";
}

Suggested Links

• API Reference of the MaskedTextBox