This is a migrated thread and some comments may be shown as answers.

TextBox ValueChanged not working with EditForm

2 Answers 371 Views
TextBox
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Veteran
Michael asked on 29 Mar 2020, 11:07 PM

I've tried getting this to work a number of ways, but it appears that using the 'ValueChanged' event with the Telerik TextBox is incompatible with <EditForm>.

The attached code generates an error using the <EditForm> tag.  Works fine if its commented out. The TextBox works fine with EditForm but without ValueChanged defined.  Any ideas?

@page "/testpage"
 
<EditForm Model="contactName" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />
 
    from the handler: @result
    <br />
    from model: @contactName.LastName
    <br />
 
    <TelerikTextBox ValueChanged="@( (string s) => MyValueChangeHandler(s) )"
                    Value="@contactName.LastName">
    </TelerikTextBox>
 
    @*<TelerikTextBox @bind-Value="@contactName.LastName"/>*@
 
    <ValidationMessage For="@(() => contactName.LastName)" />
 
    <div>
        <button class="btn btn-primary" type="submit">OK</button>
 
    </div>
 
</EditForm>
 
 
@code {
    string result;
    public Contact contactName { get; set; } = new Contact();
 
    private void MyValueChangeHandler(string theUserInput)
    {
        result = string.Format("The user entered: {0}", theUserInput);
 
        //you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
        contactName.LastName = theUserInput;
    }
 
    private void OnValidSubmit()
    {
        result = "Form Submitted";
    }
 
    public class Contact
    {
        public int NameId { get; set; }
        public string FirstName { get; set; }
 
        [System.ComponentModel.DataAnnotations.Required(ErrorMessage = "You must enter a Last Name.")]
        public string LastName { get; set; }
    }
}

2 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 30 Mar 2020, 08:57 AM

Hi Michael,

You can read more about this error and how to solve it in this article: https://docs.telerik.com/blazor-ui/knowledge-base/requires-valueexpression

Here's the simplest change:

    <TelerikTextBox ValueChanged="@( (string s) => MyValueChangeHandler(s) )"
                    Value="@contactName.LastName" ValueExpression="@( () => contactName.LastName )">
    </TelerikTextBox>

And you may also find this article interesting: https://docs.telerik.com/blazor-ui/knowledge-base/textbox-validate-on-change

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Michael
Top achievements
Rank 1
Veteran
answered on 30 Mar 2020, 09:05 AM
Thanks!  And thanks for all of the quick replies.
Tags
TextBox
Asked by
Michael
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Michael
Top achievements
Rank 1
Veteran
Share this question
or