Blazor表单验证：输入托盘数量需必填重量及绑定值不更新问题

问题场景 #

我有一段Blazor表单代码：

<BSLabel IsColumn="true">Pallets</BSLabel>
<BSCol ColumnSmall="4">
    <BSInput InputType="InputType.Number" @bind-Value="Booking.PalletsQty"></BSInput>
</BSCol>
<div class="col">
    <BSLabel Class="row">Weight In Kilograms</BSLabel>
    <BSLabel Class="row">(Gross weight of PO)</BSLabel>
</div>
<BSCol ColumnSmall="4">
    <BSInput InputType="InputType.Text" @bind-Value="Booking.Weight"></BSInput>
    <ValidationMessage For="() => Booking.Weight"></ValidationMessage>
</BSCol>

需求是：当用户输入托盘数量（PalletsQty）时，重量字段（Weight）必须填写，要立即触发重量字段的必填验证提示。

按照建议修改第一个输入控件后：

<BSInput InputType="InputType.Number" @bind-Value="Booking.PalletsQty" @onchange="(() => SetBooking())"></BSInput>

现在每次修改值时SetBooking()方法都会被调用，但模型中的Booking.PalletsQty值并未更新，同时也没实现触发重量字段验证的需求。

解决方案 #

1. 修复绑定值不更新的问题 #

@bind-Value本质是封装了Value属性和ValueChanged事件，手动添加@onchange会覆盖默认的绑定逻辑，导致值无法同步到模型。要保留绑定同时触发自定义逻辑，应该用@bind-Value:after替代@onchange：

<BSInput InputType="InputType.Number" @bind-Value="Booking.PalletsQty" @bind-Value:after="SetBooking"></BSInput>

这样既保证Booking.PalletsQty能正常更新，又会在值变更后执行SetBooking方法。

2. 触发重量字段的必填验证 #

首先确保你的模型类中Weight字段已经标记了[Required]特性：

public class BookingModel
{
    public int PalletsQty { get; set; }

    [Required(ErrorMessage = "重量字段不能为空")]
    public string Weight { get; set; }
}

然后在组件中注入EditContext，并在SetBooking方法中手动触发Weight字段的验证：

@inject EditContext EditContext

// 组件内的方法
private void SetBooking()
{
    // 生成Weight字段的标识，通知验证系统字段已变更
    var weightField = FieldIdentifier.Create(() => Booking.Weight);
    EditContext.NotifyFieldChanged(weightField);
    // 若需要触发整个表单的验证，可替换为下面的代码
    // EditContext.Validate();
}

这样当用户修改PalletsQty时，会立即触发Weight字段的必填验证提示。

3. 优化：实时触发验证（可选） #

如果希望用户输入托盘数量的过程中（而非仅失去焦点时）就触发验证，可以将绑定事件改为oninput：

<BSInput InputType="InputType.Number" 
         @bind-Value="Booking.PalletsQty" 
         @bind-Value:event="oninput"
         @bind-Value:after="SetBooking"></BSInput>

这样每输入一个字符就会同步值并触发验证，交互更及时。

内容的提问来源于stack exchange，提问作者bilpor