Blazor自定义InputText组件：ValidationMessage不显示错误如何解决？

问题出在自定义组件里的ValidationMessage没能正确关联到绑定字段的验证上下文，只要给组件添加表达式参数并传递给ValidationMessage就能解决，不需要继承Input系列组件，具体实现如下：

1. 改造MyInput.razor组件 #

添加ValueExpression参数，让ValidationMessage通过这个表达式定位到对应字段的错误：

<div class="form-group">
    <label>@LabelText</label>
    <InputText @bind-Value="Value" />
    <ValidationMessage For="@ValueExpression" />
</div>

@code {
    // 绑定的值
    [Parameter]
    public string Value { get; set; }

    // 值变更回调
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    // 关键：用于关联验证字段的表达式
    [Parameter]
    public Expression<Func<string>> ValueExpression { get; set; }

    // 标签文本
    [Parameter]
    public string LabelText { get; set; }
}

2. 在Index.razor中正常使用组件 #

直接用@bind-Value绑定模型属性即可，Blazor会自动传递ValueChanged和ValueExpression参数：

<EditForm Model="@MyModel" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <MyInput LabelText="姓名" @bind-Value="MyModel.Name" />

    <button type="submit">提交</button>
</EditForm>

@code {
    private MyModel MyModel = new();

    private void HandleSubmit()
    {
        // 执行提交逻辑
    }

    public class MyModel
    {
        [MinLength(3, ErrorMessage = "姓名长度不能少于3个字符")]
        public string Name { get; set; }
    }
}

原理说明 #

Blazor的ValidationMessage组件需要通过For参数获取指向模型属性的表达式，以此从EditContext的验证消息存储中匹配对应字段的错误。之前的组件缺少这个表达式关联，导致ValidationMessage找不到对应错误，而ValidationSummary是全局展示所有错误，所以能正常显示。添加ValueExpression参数后，ValidationMessage就能精准定位到绑定字段的验证错误，实现和原生Input组件一样的验证提示效果。

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