如何在EditForm中为自定义组件配置验证功能

问题根源 #

Blazor 内置输入组件（如 InputText、InputSelect）默认继承 InputBase<T> 基类，该类已实现与 EditContext 的验证交互逻辑。而自定义组件如果未集成这套机制，即使值已更新，EditContext 也无法感知，导致 ValidationMessage 持续显示错误。

解决方案 #

方案一：修改自定义组件继承 InputBase<T>（推荐） #

让你的 MaterialSearchVertical 组件继承 Blazor 内置的 InputBase<T> 基类，自动适配表单验证体系：

1. 修改自定义组件代码

@inherits InputBase<string>

<!-- 保留原组件的UI结构，将输入/选择逻辑绑定到 CurrentValue -->
<div class="material-search-container">
    <!-- 示例：假设组件内有搜索输入框或选择器 -->
    <input 
        type="text" 
        @bind="CurrentValue" 
        disabled="@(!EditEnabled)" 
        placeholder="搜索物料SKU" />
    <!-- 原组件的其他逻辑（如搜索按钮、下拉列表等） -->
</div>

@code {
    [Parameter]
    public bool EditEnabled { get; set; }

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

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

    [Parameter]
    public string MaterialTypeLoad { get; set; }

    [Parameter]
    public EventCallback<MaterialSearchResult> EventCallBackMaterialSearch { get; set; }

    // 重写值解析方法（根据MaterialSKUID的实际类型调整，比如int则改为InputBase<int>）
    protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
    {
        result = value;
        validationErrorMessage = null;
        // 若需自定义格式验证，可在此添加逻辑（比如校验SKU格式）
        return true;
    }

    // 当组件内部选中物料时，更新CurrentValue并触发回调
    private async Task OnMaterialSelected(MaterialSearchResult selectedResult)
    {
        CurrentValue = selectedResult.MaterialSKUID;
        await EventCallBackMaterialSearch.InvokeAsync(selectedResult);
    }
}

2. 更新组件使用方式
   将原有的 MaterialSKUID 参数替换为 @bind-Value 绑定：

<div class="col-sm-12 col-md-12 col-lg-12">
    <MaterialSearchVertical 
        @ref="materialSearchVertical" 
        EditEnabled="@EditEnabled" 
        MaterialTypeID="@materialRequestDetailDisplaySetup.MaterialTypeID"
        PurchaseTypeID="@materialRequestSetup.PurchaseTypeID"
        MaterialTypeLoad=" AND A.ReferenceDetailsCode in ('SUMAT','MNT','HLTS') "
        @bind-Value="@materialRequestDetailDisplaySetup.MaterialSKUID"
        EventCallBackMaterialSearch="MaterialSearchEventCallBack"></MaterialSearchVertical>
    <ValidationMessage For="@(() => materialRequestDetailDisplaySetup.MaterialSKUID)" />
</div>

方案二：手动通知 EditContext 字段变化（无需修改组件源码） #

如果无法修改自定义组件，可在值更新的回调中手动触发 EditContext 的验证状态更新：

1. 在父组件中获取 EditContext
   在包含 EditForm 的组件中定义 EditContext 变量：

<EditForm Model="@materialRequestDetailDisplaySetup" @ref="editForm">
    <!-- 表单内容 -->
</EditForm>

@code {
    private EditForm editForm;
    private EditContext EditContext => editForm.EditContext;

    // 物料选择回调方法
    private async Task MaterialSearchEventCallBack(MaterialSearchResult result)
    {
        // 更新模型值
        materialRequestDetailDisplaySetup.MaterialSKUID = result.MaterialSKUID;

        // 通知EditContext字段已更新，触发重新验证
        var fieldId = EditContext.Field(nameof(materialRequestDetailDisplaySetup.MaterialSKUID));
        EditContext.NotifyFieldChanged(fieldId);
        // 可选：强制验证整个表单
        // EditContext.Validate();
    }
}

前置检查 #

确保你的模型类已添加验证特性，比如：

public class MaterialRequestDetailDisplaySetup
{
    [Required(ErrorMessage = "请选择物料SKU")]
    public string MaterialSKUID { get; set; }

    public int MaterialTypeID { get; set; }
    // 其他属性
}

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