MaskedTextbox not displaying value on form edit

1 Answer 12 Views
MaskedTextBox
Kirk
Top achievements
Rank 1
Kirk asked on 18 May 2022, 01:21 PM

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>

 

   

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 23 May 2022, 06:31 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Kirk
Top achievements
Rank 1
commented on 30 May 2022, 02:35 PM

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
Telerik team
commented on 02 Jun 2022, 05:48 AM

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

Tags
MaskedTextBox
Asked by
Kirk
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or