Blazor中借助Blazored.FluentValidator用单个EditForm校验模型列表问题

1. 新增包裹列表的根视图模型 #

EditForm仅支持绑定单个模型，我们新增一个根视图模型包裹需要校验的模型列表即可：

public class BatchModelViewModel
{
    // 存储你的所有子模型
    public List<Model> ModelList { get; set; } = new();
}

2. 新增根视图模型的校验器 #

直接复用你已经写好的ModelValidator，通过RuleForEach为列表内每个子模型应用校验规则：

public class BatchModelViewModelValidator : AbstractValidator<BatchModelViewModel>
{
    public BatchModelViewModelValidator(IValidator<Model> childValidator)
    {
        // 为列表内每一个子项应用已有的Model校验规则
        RuleForEach(x => x.ModelList).SetValidator(childValidator);
    }
}

3. 更新服务注册 #

在Startup.cs/Program.cs中新增根校验器的服务注册：

// 保留你原来的子校验器注册
services.AddTransient<IValidator<Model>, ModelValidator>();
// 新增根视图模型校验器注册
services.AddTransient<IValidator<BatchModelViewModel>, BatchModelViewModelValidator>();

4. 修改EditForm绑定逻辑 #

将EditForm原来绑定的单个模型替换为根视图模型：

@code {
    // 替换原来的单个Model和_Models列表，所有子模型都存在这个根视图模型中
    private BatchModelViewModel BatchViewModel { get; set; } = new();
    private FluentValidationValidator fluentValidationValidator;

    private async Task HandleSubmitModel()
    {
        // 可选：手动触发校验确认结果
        var isValid = await fluentValidationValidator.ValidateAsync();
        if(!isValid) return;

        // 校验通过后的业务逻辑
    }

    // 其他逻辑如RemoveModel等保持不变
}

<EditForm Model="@BatchViewModel" OnValidSubmit="@HandleSubmitModel">
  <FluentValidationValidator @ref="fluentValidationValidator"/>
  <div class="ModelContainer">
    @foreach (var _model in BatchViewModel.ModelList)
     {
      <div class="Model-Item">
        <!-- 优化@key，避免用IndexOf导致的绑定异常，有唯一Id优先用Id -->
        <ModelComponent @key="_model" Model="_model" Remove="RemoveModel"/>
      </div>
      } 
  </div>
  <button type="submit">提交</button>
</EditForm>

注意事项 #

• 你的ModelComponent内部输入控件需要使用Blazor内置的Input*系列组件，或者实现了Blazor表单双向绑定规范的自定义组件，校验错误信息才能正常展示在对应字段下方
• 提交时会自动校验列表内所有子模型的所有字段，任何一个字段不符合规则都会触发校验失败，不会触发OnValidSubmit逻辑

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