I have a custom control that is wrapping the Kendo MaskedTextBox. The template looks like:

<kendo-maskedtextbox
    [id]="id + '_kendo-maskedtextbox'"
    [ngClass]="{ 'error-style': this.isError }"
    class="default-style"
    [(ngModel)]="value"
    [mask]="textboxMask"
    [rules]="rules"
    [maskValidation]="maskValidation"
    [rules]="rules"
    [fillMode]="fillMode"
    [rounded]="rounded"
    [size]="size"
    [disabled]="disabled"
    [style.width.px]="width"
    [includeLiterals]="includeLiterals? true : false"
    (blur)="onBlur()"
    (focus)="onFocus()"
    (valueChange)="onValueChange($event)">
</kendo-maskedtextbox>

What I have found when I have the includeLiterals input binding my value stored in value gets cleared out, but if I do not have this input present on the masked textbox, the value is left alone and works as expected. This seems like there is a bug in the code for the control, that is causing this. My only work around is to not have that input binding present in my codes template so the rest of my controls work as expected, but I need to have the includeLiterals so that I can have the literals part of the value when it is updated by the user.

To reproduce, create an component that wraps the masked textbox input, ensure that component implements the ControlValueAccessor interface and has a provided defined for it. Then on another page use that component and pass in the value you want for it via ngModel.

I have tried this with out the control being wrapped in the other control and it works without any issue, but I need it wrapped to provide a uniform experience for the rest of my application and reduce any duplicated code.

I'm trying to check if there are any changes in a form so that I can warn the user of changes, but when setting the model and binding a null value to the MaskedTextbox it changes it to an empty string and the user gets the message that something has changed. Is there a way to prevent the MaskedTextbox from doing that?

Hi, we are looking for the input, dropdowns which has this outline design in the material theme but we are not able to find it. 

It'd have been better if we have this.

something like this https://codepen.io/finnhvman/pen/xyOORQ

Thanks.

I have an Angular Reactive form with a kendo grid. When I double click a record in the grid I have a kendo window popping up to allow the user to edit the details of the selected record. I am able correctly  load the values of some of the other controls like the textbox and dropdown lists, but the masked textbox value does not want to display. I'n not sure what I'm doing wrong. Here is my html markup and component code. If I use interpolation then its showing me the value in the div. As you can see in the screenshot

Hi,

Could i make all validation like Mask only in HTML File ?

Like this ?

@Component({
    selector: "my-app11b",
    template: `
        <form #templateForm11b="ngForm" novalidate>
            <p>Enter valid postcode (A9 9AA)</p>
            <kendo-maskedtextbox
                    name="value1"
                    [(ngModel)]="value10b"
                    [mask]="A9 9AA"
                    [maskValidation]="true"
            ></kendo-maskedtextbox>
            <button [disabled]="!templateForm11b.valid" type="submit" class="k-button">
                Submit
            </button>
        </form>
    `,
})
export class AppComponent11b {
    public value10b = "M1 1AE"; //only data
}

Regards

Hi,

I search an elegant way for connecting together mask field and control of this field only in typescript.

Do you have an template ?

I want avoid two separate datas for same field

Regards

Hi,

The MaskedTextBox is missing some features of a regular TextBox:

• adornments 
• validation icons
• clearButton / clearButtonIcon
• placeholder
• selectOnFocus
• required validation

I think it would be logical if a MaskedTextBox should be a TextBox with mask functionality.  All input controls should be as consistent as possible.

Actually, the same question applies to the following input controls: 

• kendo-numerictextbox
• kendo-autocomplete
• kendo-combobox
• kendo-dropdownlist
• kendo-multiselect
• kendo-textarea

Could this be improved please?

Sample code:

<kendo-maskedtextbox  id="txteef610884cad733d72d8"  name="txteef610884cad733d72d8"  mask="(0000)-(00000)"  (change)="update($event)"                     [(ngModel)]="contact"  #txteef610884cad733d72d8="ngModel"></kendo-maskedtextbox>

I want to add a Placeholder to my MaskedTextBox. But adding the placeholder attribute does not work.

I even set maskOnFocus to true so that placeholder will be shown but to no avail.

Is there a way for me to achieve this in the current version?

And are there plans to support placeholder in MaskedTextBox in the near future?