зеркало из https://github.com/telerik/blazor-docs.git
101 строка
3.3 KiB
Markdown
101 строка
3.3 KiB
Markdown
---
|
|
title: How to handle the ValueChanged event and use forms and validation
|
|
description: How to handle the ValueChanged event and use forms and validation.
|
|
type: how-to
|
|
page_title: How to handle the ValueChanged event and use forms and validation
|
|
slug: value-changed-validation-model
|
|
position:
|
|
tags:
|
|
res_type: kb
|
|
---
|
|
|
|
## Environment
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>Product</td>
|
|
<td>
|
|
AutoComplete for Blazor,<br />
|
|
ComboBox for Blazor,<br />
|
|
DatePicker for Blazor,<br />
|
|
DateTimePicker for Blazor,<br />
|
|
DropDownList for Blazor,<br />
|
|
Form for Blazor,<br />
|
|
MultiColumnComboBox for Blazor,<br />
|
|
MultiSelect for Blazor,<br />
|
|
TimePicker for Blazor
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
## How to handle the ValueChanged event and use forms and validation
|
|
|
|
### Problem
|
|
|
|
Handling the `ValueChanged` event exposed from inputs interferes with two-way binding through `@bind-Value` and thus, with [validation]({%slug common-features/input-validation%}).
|
|
|
|
You cannot use both `@bind-Value` and `ValueChanged`, you will get a compilation error similar to
|
|
|
|
> The component parameter 'ValueChanged' is used two or more times for this component. Parameters must be unique (case-insensitive). The component parameter 'ValueChanged' is generated by the '@bind-Value' directive attribute.
|
|
|
|
|
|
### Solution
|
|
|
|
You can use the `ValueExpression` and `Value` properties to provide, respectively, the model field and the value of the input, and you can update the model with the new value in the `ValueChanged` event handler.
|
|
|
|
>caption Example of invoking validation messages when handling the ValueChanged event
|
|
|
|
````CSHTML
|
|
@using System.ComponentModel.DataAnnotations // used for the model annotations only
|
|
|
|
<EditForm Model="person">
|
|
<DataAnnotationsValidator />
|
|
<ValidationSummary />
|
|
|
|
<TelerikTextBox ValueChanged="@( (string s) => MyValueChangeHandler(s) )"
|
|
Value="@person.theTbValue"
|
|
ValueExpression="@( () => person.theTbValue )">
|
|
</TelerikTextBox>
|
|
|
|
<button type="submit">Submit</button>
|
|
|
|
</EditForm>
|
|
|
|
from the handler: @result
|
|
<br />
|
|
from model: @person.theTbValue
|
|
|
|
@code {
|
|
string result;
|
|
Person person = new Person();
|
|
|
|
public class Person
|
|
{
|
|
[Required(ErrorMessage = "Enter a name")]
|
|
[StringLength(10, ErrorMessage = "That name is too long")]
|
|
public string theTbValue { get; set; } = "lorem ipsum";
|
|
}
|
|
|
|
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
|
|
//For the validation to work you must now also define the ValueExpression because @bind-Value did it for you
|
|
person.theTbValue = theUserInput;
|
|
}
|
|
}
|
|
````
|
|
|
|
@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
|
|
|
|
>tip Telerik inputs also offer an `OnChange` event that does not interfere with two-way binding. It fires on blur or on `Enter`.
|
|
|
|
|
|
## See also
|
|
|
|
* [Knowledge Base article: Validate a Telerik component as child control and apply invalid border ]({%slug inputs-kb-validate-child-component%})
|