Blazor嵌套组件无法高亮无效字段、不显示ValidationMessages问题

问题根源 #

问题核心是嵌套组件内部的ValidationMessage绑定的表达式与父级EditContext存储的验证表达式不匹配：
子组件内写的() => TextValue、() => DateValue指向的是子组件自身的局部参数，和父表单关联的ProductModel的Name、AddedOn属性的表达式没有关联，ValidationMessage无法匹配到对应属性的验证错误，而ValidationSummary是遍历整个表单的所有错误，所以可以正常显示。

解决方案 #

修改子组件，接收对应属性的表达式与变更回调，使用父级传递的表达式绑定ValidationMessage即可：

修改后的 ChildComponent.razor #

<div class="card">
    <div class="card-header">
        @(new MarkupString(Caption))
    </div>
    <div class="card-body">
        <input type="text" @bind-value=@TextValue @bind-value:after="() => TextValueChanged.InvokeAsync(TextValue)" />
        <ValidationMessage For=@TextValueExpression />
        
        <input type="datetime-local" @bind-value=@DateValue @bind-value:after="() => DateValueChanged.InvokeAsync(DateValue)" />
        <ValidationMessage For=@DateValueExpression />
    </div>
</div>

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

    [Parameter]
    public string TextValue { get; set; }
    [Parameter]
    public EventCallback<string> TextValueChanged { get; set; }
    [Parameter]
    public System.Linq.Expressions.Expression<Func<string>> TextValueExpression { get; set; }

    [Parameter]
    public DateTime? DateValue { get; set; }
    [Parameter]
    public EventCallback<DateTime?> DateValueChanged { get; set; }
    [Parameter]
    public System.Linq.Expressions.Expression<Func<DateTime?>> DateValueExpression { get; set; }
}

修改 TestPage.razor 中子组件调用逻辑 #

将参数传递改为双向绑定，Blazor会自动传递对应的变更回调与属性表达式到子组件：

<ChildComponent Caption="嵌套组件"
                @bind-DateValue=@ProductModel.AddedOn
                @bind-TextValue=@ProductModel.Name />

修改完成后嵌套组件内的ValidationMessage就可以正常匹配到对应属性的验证错误并显示。

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