Blazor循环场景下DataAnnotationsValidator验证失效问题求助

核心问题分析 #

你的验证失效原因有两点：

1. 默认的DataAnnotationsValidator仅验证顶层模型，不会递归遍历集合中的元素进行验证；
2. foreach循环中绑定集合元素时，Blazor无法生成正确的属性表达式，导致ValidationMessage无法关联到对应字段的验证信息。

分步解决方案 #

1. 替换验证组件

将DataAnnotationsValidator替换为ObjectGraphDataAnnotationsValidator，它会递归验证整个对象图（包括集合内的每个元素）：

// Example 2 修改后
<EditForm Model=@_fooModels OnValidSubmit=@OnValidSubmit OnInvalidSubmit=@OnInvalidSubmit>
   <ObjectGraphDataAnnotationsValidator />
   <ValidationSummary />
   <ListComponent @bind-Values=@_fooModels />
   <button type="submit">Submit</button>
</EditForm>

2. 修复集合元素绑定表达式

把ListComponent中的foreach循环改为for循环，手动捕获索引避免闭包问题，确保每个元素的绑定表达式能正确指向集合中的对应项：

@for (int i = 0; i < Values.Count; i++)
{
    var index = i; // 捕获当前索引，避免闭包导致的表达式错误
    <InputComponent @bind-Value=@Values[index].Text />
}

@code {
   [Parameter]
   public required List<FooModel> Values { get; set; }

   [Parameter]
   public EventCallback<List<FooModel>> ValuesChanged { get; set; }
}

3. 同步输入组件初始值

在InputComponent中添加初始化逻辑，确保输入框初始值与模型值同步：

<input type="text" value=@value @onchange=@OnInput />
<ValidationMessage For=@ValueExpression />

@code {
    private string? value;
    
    [Parameter]
    public Expression<Func<string>> ValueExpression { get; set; } = default!;
   
    [Parameter]
    public string? Value { get; set; }

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

    protected override void OnInitialized()
    {
        value = Value; // 初始化时同步模型值到输入框
    }
    
    private async Task OnInput(ChangeEventArgs e)
    {
        value = e?.Value?.ToString();
        await ValueChanged.InvokeAsync(value);
    }
}

原理说明 #

• ObjectGraphDataAnnotationsValidator：扩展了基础验证组件的能力，会遍历模型的所有嵌套属性、集合元素，执行数据注解验证；
• for循环绑定：解决了foreach循环中闭包导致的表达式生成错误，让每个InputComponent的ValueExpression能正确指向Values[index].Text，确保ValidationMessage能关联到对应字段的验证结果；
• 初始值同步：避免输入框显示值与模型初始值不一致的问题，保证用户体验和数据一致性。

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