Blazor 的 InputSelect 组件在其值更改时未更新表单验证错误答案

【问题标题】：Blazor's InputSelect Component not updating form validations errors on it's value changeBlazor 的 InputSelect 组件在其值更改时未更新表单验证错误
【发布时间】：2021-04-04 13:49:40
【问题描述】：

我在一个名为 LocationId 的字段上使用 Blazor 的 InputSelect 组件。

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

在我的 razor 组件上，进行表单验证，我正在调用这样的子组件：

<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>

子组件中有InputSelect组件，其代码为：

@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);
        }
    }
}

@bind-Value="HandleChange" 的工作是创建完美运行的 blazor 链绑定东西。父组件有这个属性@bind-MyPhrase="@StudentData.LocationId"，它将模型的值发送给子组件进行绑定。

当我更改选择的值但验证消息未更新时，就会出现问题。但是，当我单击提交表单的按钮时，验证消息会更新。你可以看到下面的 gif，它显示了这个东西。

我还注意到，如果 id 不采用链绑定方法并将我的 InputSelect 直接保留在 EditForm 组件中，则不会发生此问题。它只发生在父子编码方式（链式绑定）中。

我该如何纠正这些事情？

【问题讨论】：

你可以用<InputSelect @onblur="(async (e) => { editContext.Validate();})">，用你自己的SelectCommon组件，不能加@onblur。
什么是editContext？
可以在父页面创建public EditContext editContext{get;set;}，在InputSelect @onblur中验证
阅读Your control inside an EditForm部分。
@daniherrera 他们在editform里面。

标签： asp.net-core blazor blazor-server-side

【解决方案1】：

感谢@dani-herrera

ApplicationUserDropDown.razor（子组件）：

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

ApplicationUserDropDown.razor.cs（子组件）：

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

使用子组件的剃须刀页面：

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

【讨论】：