How to make two-way binding on Blazor component
In general the accepted answer is correct and works fine. Only thing to add is the code example uses the default name convention based Events e.g.: {PropertyName}Changed
.
[Parameter] public EventCallback<string> BindingValueChanged { get; set; }
However you can override this naming convention @bind-{Property}:event="{EventCallbackName}"
<MyInputComponent @bind-BindingValue="model.Name" @bind-BindingValue:event="OnValueChanged"/>
.....
[Parameter] public EventCallback<string> OnValueChanged { get; set; }
Quick answer
Quoting Blazor docs:
Component parameters
Binding recognizes component parameters, where @bind-{property} can bind a property value across components.
For your page:
<EditForm Model="model" OnValidSubmit="Submit">
<MyInputComponent @bind-BindingValue="model.Name" />
</EditForm>
The child component MyInputComponent
:
<div>
<InputText type="text" @bind-Value="@BindingValue" />
</div>
@code {
private string _value;
[Parameter]
public string BindingValue
{
get => _value;
set
{
if (_value == value ) return;
_value = value;
BindingValueChanged.InvokeAsync(value);
}
}
[Parameter]
public EventCallback<string> BindingValueChanged { get; set; }
}
Notice
- You should to raise binding changes from children component through
EventCallback<string> BindingValueChanged
. - I chose
BindingValue
andBindingValueChanged
as identifiers, but, you can use justValue
andValueChanged
. Then will be:<MyInputComponent @bind-Value="model.Name" />
Try it at BlazorFiddle.
(Edited 2022) Full documented now at: Binding with component parameters
Edited: See Option 2 below for a clean solution:
Your control inside an EditForm
If you want to put your component inside an EditForm and deal with validations, or take other actions using the onchange event, you should to raise EditContext.NotifyFieldChanged
. You have 2 options to do it.
Option 1: Raising from EditContext
You can get EditContext
from CascadeParameter
and invoke NotifyFieldChanged
by hand:
[CascadingParameter] EditContext EditContext { get; set; } = default!;
[Parameter] public Expression<Func<string>>? ValueExpression { get; set; }
#endregion
#region bindedValue
[Parameter] public EventCallback<string> ValueChanged { get; set; }
private string _value { set; get; } = "";
[Parameter]
public string Value
{
get => _value;
set
{
if (_value == value) return;
_value = value;
ValueChanged.InvokeAsync(value);
var fieldIdentifier = FieldIdentifier.Create(ValueExpression);
EditContext.NotifyFieldChanged(fieldIdentifier);
}
}
Option 2 (recomended): Through inheritance from InputBase
You can inherit from InputBase<string>
and just implement TryParseValueFromString
. InputBase
will do the work for you,When you inherit from InputBase
you have Value
, ValueChanged
, EditContext
, etc.
protected override bool TryParseValueFromString(string? value, out string result, [NotNullWhen(false)] out string? validationErrorMessage)
{
result = value ?? "";
validationErrorMessage = null;
return true;
}