Blazor中如何为列表属性显示自定义ValidationMessage

可以实现内联显示，不用只依赖ValidationSummary，问题核心是Blazor的表单验证系统没感知到Field.Options字段的状态变化，导致ValidationMessage组件没触发更新。以下是两种可行方案：

方案一：让自定义组件通知字段状态变化 #

在你的OptionEditor自定义组件中，通过EditContext主动通知表单系统Field.Options字段已变更，这样ValidationMessage就能捕获到验证状态并显示消息。

改造OptionEditor组件 #

@inject EditContext EditContext

<!-- 组件原有渲染内容 -->

@code {
    [Parameter]
    public List<OptionFieldViewModel> OptionFields { get; set; }

    // 新增参数，接收字段表达式用于生成FieldIdentifier
    [Parameter]
    public Expression<Func<List<OptionFieldViewModel>>> OptionFieldsExpression { get; set; }

    private FieldIdentifier _fieldId;

    protected override void OnInitialized()
    {
        // 根据表达式生成对应的字段标识
        _fieldId = FieldIdentifier.Create(OptionFieldsExpression);
    }

    // 当组件内操作OptionFields（添加/删除项等）时，调用此方法通知验证系统
    private void TriggerValidationUpdate()
    {
        EditContext.NotifyFieldChanged(_fieldId);
    }

    // 示例：比如在添加选项的方法中调用
    private void AddOption()
    {
        OptionFields.Add(new OptionFieldViewModel());
        TriggerValidationUpdate();
    }
}

父页面调用组件时传递表达式 #

<OptionEditor OptionFields="@Field.Options" OptionFieldsExpression="() => Field.Options"/>
<ValidationMessage For="() => Field.Options"/>

方案二：手动读取并渲染验证消息 #

如果不想修改自定义组件，可以直接从EditContext中获取Field.Options的验证消息，手动渲染在指定位置：

<OptionEditor OptionFields="@Field.Options"/>

@if (EditContext.GetValidationMessages(FieldIdentifier.Create(() => Field.Options)).Any())
{
    <div class="text-danger">
        @EditContext.GetValidationMessages(FieldIdentifier.Create(() => Field.Options)).First()
    </div>
}

两种方案都能实现内联显示自定义验证错误消息，不需要仅依赖ValidationSummary。

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