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.