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
BindingValueandBindingValueChangedas identifiers, but, you can use justValueandValueChanged. 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;
}