CODEWITHSUNDEEP
asp.net-coreblazorblazor-server-side
yogihosting
yogihosting

Reputation: 6332

Blazor's InputSelect Component not updating form validations errors on it's value change

I am using Blazor's InputSelect Component on a field called LocationId.

[Range(1, int.MaxValue, ErrorMessage = "Please Select Location")]
public int LocationId { get; set; }

On my razor component, where form validations are taking place, I am calling a child component like this:

<div class="form-group">
    <label>Location</label>
    <ValidationMessage For="@(() => StudentData.LocationId)" />
    <SelectCommon RowType="Location" RowData="Locations" @bind-MyPhrase="@StudentData.LocationId">
        <SelectOption>
            <option selected disabled value="0">Choose a Location</option>
        </SelectOption>

        <OptionValue Context="p">
            <option value="@p.Id">@p.City, @p.State</option>
        </OptionValue>
    </SelectCommon>
</div>

In the child component there is the InputSelect component whose code is:

@typeparam RowType

<InputSelect class="form-control" @bind-Value="HandleChange">
    @if (SelectOption != null)
    {
        @SelectOption
    }

    @foreach (RowType item in RowData)
    {
        @OptionValue(item);
    }
</InputSelect>

@code {
    [Parameter]
    public RenderFragment SelectOption { get; set; }

    [Parameter]
    public RenderFragment<RowType> OptionValue { get; set; }

    [Parameter]
    public IEnumerable<RowType> RowData { get; set; }

    [Parameter]
    public int MyPhrase { get; set; }

    [Parameter]
    public EventCallback<int> MyPhraseChanged { get; set; }

    public int HandleChange
    {
        get { return MyPhrase; }
        set
        {
            MyPhrase = value;
            MyPhraseChanged.InvokeAsync(MyPhrase);
        }
    }
}

The work of @bind-Value="HandleChange" is to create blazor chain binding thing which is working perfectly. The parent component has this attribute @bind-MyPhrase="@StudentData.LocationId" which send the value of the model to the child for binding.

The problem is happening when i change the value of the select but the validation messages are not updated. However when I click the button which submits the form the validation messages updates. You can see the below gif which is showning this thing.

enter image description here

I have also notices that If id do not go with the chain binding approach and keep my InputSelect directly inside the EditForm component then this problem does not happen. It happens only in the parent-child way of coding (chain binding).

How can i correct this things?

Upvotes: 1

Views: 972

Answers (1)

StevieTimes
StevieTimes

Reputation: 465

Thanks to @dani-herrera

ApplicationUserDropDown.razor (child component):

    <TelerikComboBox id="userbox" @bind-Value="@Value"
             Data="@Data" TItem="UserListVM"
             TValue="Guid?" Placeholder="Select User"
             ValueField="Id" TextField="FullName">

ApplicationUserDropDown.razor.cs (child component):

public partial class ApplicationUserDropDown
{
    #region Value two way binding
    [CascadingParameter] EditContext EditContext { get; set; } = default!;
    [Parameter] public Expression<Func<Guid?>> ValueExpression { get; set; }

    private Guid? _valueId;
    [Parameter]
    public Guid? Value
    {
        get => _valueId;
        set
        {
            if (_valueId == value) return;
            _valueId = value;
            ValueChanged.InvokeAsync(value);
            var fieldIdentifier = FieldIdentifier.Create(ValueExpression);
            EditContext.NotifyFieldChanged(fieldIdentifier);
        }
    }
    [Parameter]
    public EventCallback<Guid?> ValueChanged { get; set; }

    #endregion Value two way binding

razor page using child component:

<ApplicationUserDropDown @bind-Value="Account.OwnerId"></ApplicationUserDropDown>
            <ValidationMessage For="@(() => Account.OwnerId)">Owner is Required</ValidationMessage>

Upvotes: -1

Related Questions