Blazor组件库自定义InputText的ValidationMessage验证消息不显示问题

问题根因 #

Blazor的ValidationMessage组件依赖传入的For参数的表达式树定位对应字段的验证消息，你当前封装的组件里For="@(() => model)"指向的是组件内部的model参数变量，而非业务层实际绑定的模型属性，验证系统无法匹配到对应字段的错误信息，因此不展示。

修复方案 #

1. 重写CustomInputText组件 #

将组件改为泛型实现，替换model参数为For参数，类型为Expression<Func<TValue>>，和原生表单组件逻辑对齐：

@using System.Linq.Expressions
@using Microsoft.AspNetCore.Components.Forms
@typeparam TValue

<input value="@Value" @oninput="OnValueChanged" placeholder="@placeholderText" class="form-control i-component o-my-4" />
<ValidationMessage For="@For" />

@code {
    [Parameter]
    public string placeholderText { get; set; }

    [Parameter, EditorRequired]
    public Expression<Func<TValue>> For { get; set; }

    [Parameter]
    public TValue Value { get; set; }

    [Parameter]
    public EventCallback<TValue> ValueChanged { get; set; }

    [CascadingParameter]
    private EditContext CurrentEditContext { get; set; }

    protected override void OnInitialized()
    {
        // 校验组件必须放在EditForm内使用
        if (CurrentEditContext == null)
        {
            throw new InvalidOperationException($"{nameof(CustomInputText)} 必须放在EditForm组件内部使用");
        }
    }

    private Task OnValueChanged(ChangeEventArgs e)
    {
        TValue parsedValue = (TValue)Convert.ChangeType(e.Value, typeof(TValue));
        Value = parsedValue;
        return ValueChanged.InvokeAsync(parsedValue);
    }
}

如果需要自动同步输入框的验证样式（比如校验失败时边框变红），直接继承InputBase<TValue>即可，框架会自动处理验证状态关联，无需手动维护EditContext逻辑。

2. 调整业务侧调用方式 #

<CustomInputText placeholderText="Place Holder Test" For="@(() => filterPayroll.IPF)" @bind-Value="filterPayroll.IPF"/>

.NET 6及以上版本可以自动推断泛型类型TValue，无需显式声明。

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