MaskedTextbox not displaying value on form edit

[Kirk]

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

                  <div class="col">

                    <kendo-formfield>

                      <kendo-label [for]="Mobile" text="Mobile"></kendo-label>

                      <kendo-maskedtextbox

                      formControlName="Mobile"

                      #Mobile

                      [includeLiterals]="false"

                      [(value)]="mobileValue"

                      [maskOnFocus]="true"

                      [mask]="telephoneMask"

                    ></kendo-maskedtextbox>                      

                    </kendo-formfield>        

                 

</div>

 

   

[Martin Bechev]

Hi Kirk,

Thank you for the provided code snippet.

Indeed the MaskedTextBox component expected a string as a value. Passing a number will result in an empty control.

Please ensure that the mobile number is a string, like:

 this.form = this.formBuilder.group({
        mobile: ['888356254897'],
    });

Here is an example:

https://stackblitz.com/edit/angular-wibuna

I hope this sheds some light on this case.

Regards,
Martin
Progress Telerik

[Kirk]

Hi Martin

Thanks for the feedback, I have tried passing the value in when building up the form but that does not work as well. The value is defintely a string, I even tried to hardcode it as string but its not setting the value

[Martin Bechev]

Hi Kirk, 

Please make sure that the value of the control is set through the form

 this.form = this.formBuilder.group({
      Mobile: ['0131848'],
    });

instead through the value property of the MaskedTextBox:

 
<kendo-maskedtextbox
                      formControlName="Mobile"
                      #Mobile
                      [includeLiterals]="false"
                      [(value)]="mobileValue"
                      [maskOnFocus]="true"
                      [mask]="telephoneMask"
 ></kendo-maskedtextbox>  

https://stackblitz.com/edit/angular-tsvmgk

Regards,

Martin