Nesting bindable components within components Blazor

Question

Say I have the following scenario:

Parent.razor

<Child bind-Value=registration />
@code{
 Registration registration = new();
 }

Child.razor

 <InputText class="form-control" @bind-Value=Value.Signature/>

  @code{
  [Parameter] public Registration? Value { get; set; }
  [Parameter] public EventCallback<Registration?> ValueChanged { get; set; }
  [Parameter] public Expression<Func<Registration?>>? ValueExpression { get; set; }

  private async Task OnValueChanged(Registration? value)
  => await this.ValueChanged.InvokeAsync(value);
 }

The signature InputText from the Child component does not get updated on the parent component; I've added the Value/ValueChanged/ValueExpression but it's not syncing up.

Is there something else I need to add?

Answer 1

You could try following to pass parameter on bind:after event.

    public class Registration
    {
        public string Signature { get; set; }
    }

Child.razor

<InputText class="form-control" @bind-Value=Value.Signature    @bind-Value:after="SaveChange" />

@code {
    [Parameter] public Registration? Value { get; set; }
    [Parameter] public EventCallback<Registration?> ValueChanged { get; set; }
    private void SaveChange()
    {
        ValueChanged.InvokeAsync(Value);
    }
 }

Parent

<Child @bind-Value=registration/>
@registration.Signature
@code {
    Registration registration { get; set; } = new();
}