MudBlazor中使用FluentValidation验证嵌套组件的问题

技术栈：Blazor + MudBlazor + FluentValidation
实现场景：顶层主表单包含基础输入字段与API驱动的下拉选择列表，为复用将下拉列表封装为独立子组件
现状：主表单字段验证正常（失败时标红并显示错误提示），但子组件内的下拉控件无法触发验证、同步错误状态
需求：解决子组件验证问题，同时确认当前组件复用模式的合理性

解决方案：传递表单上下文与验证状态绑定 #

1. 子组件接收FormContext与父模型绑定 #

子组件（示例：ApiDropdown.razor）需接收父组件传递的FormContext，并将下拉控件与父模型的目标属性绑定，关联验证规则：

@inject IValidator<MainFormModel> Validator
@using FluentValidation
@using MudBlazor

<MudSelect T="int" 
           @bind-Value="SelectedValue" 
           Label="API驱动下拉选项"
           For="@(() => ParentModel.SelectedOptionId)"
           Form="@FormContext">
    @foreach (var option in Options)
    {
        <MudSelectItem Value="option.Id">@option.DisplayName</MudSelectItem>
    }
</MudSelect>

@code {
    [Parameter, EditorRequired]
    public MainFormModel ParentModel { get; set; } = default!;

    [Parameter, EditorRequired]
    public FormContext? FormContext { get; set; }

    [Parameter]
    public EventCallback<int> SelectedValueChanged { get; set; }

    private int SelectedValue
    {
        get => ParentModel.SelectedOptionId;
        set
        {
            ParentModel.SelectedOptionId = value;
            await SelectedValueChanged.InvokeAsync(value);
            // 值变更后触发局部验证
            if (FormContext != null)
            {
                var validationResult = Validator.Validate(ParentModel, opt => opt.IncludeProperties(nameof(ParentModel.SelectedOptionId)));
                FormContext.NotifyValidationStateChanged();
            }
        }
    }

    private List<DropdownOption> Options { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        // 模拟API获取下拉选项逻辑
        Options = await FetchOptionsFromApi();
    }

    private async Task<List<DropdownOption>> FetchOptionsFromApi()
    {
        return new List<DropdownOption>
        {
            new() { Id = 1, DisplayName = "选项A" },
            new() { Id = 2, DisplayName = "选项B" }
        };
    }

    public class DropdownOption
    {
        public int Id { get; set; }
        public string DisplayName { get; set; } = string.Empty;
    }
}

2. 父组件传递FormContext与主模型 #

主表单组件中，需将MudForm的FormContext传递给子组件，确保验证上下文同步：

@using FluentValidation
@using MudBlazor

<MudForm Model="@MainModel" @ref="FormReference">
    <MudTextField @bind-Value="MainModel.UserName" Label="用户名" For="@(() => MainModel.UserName)" Required />
    
    <!-- 传递表单上下文与主模型给子组件 -->
    <ApiDropdown ParentModel="@MainModel" FormContext="@FormReference.FormContext" />

    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary">提交</MudButton>
</MudForm>

@code {
    private MainFormModel MainModel { get; set; } = new();
    private MudForm? FormReference { get; set; }

    public class MainFormModel
    {
        public string UserName { get; set; } = string.Empty;
        public int SelectedOptionId { get; set; }
    }

    // 主模型验证规则
    public class MainFormModelValidator : AbstractValidator<MainFormModel>
    {
        public MainFormModelValidator()
        {
            RuleFor(x => x.UserName).NotEmpty().WithMessage("用户名不能为空");
            RuleFor(x => x.SelectedOptionId).GreaterThan(0).WithMessage("请选择下拉选项");
        }
    }
}

3. 关键注意事项 #

• 子组件必须通过For属性关联父模型的目标字段，让MudBlazor验证系统识别该字段属于主表单模型
• 传递FormContext确保子组件控件的验证状态与主表单完全同步
• 子组件值变更时手动触发验证状态更新，保证错误提示实时显示

组件模式合理性分析 #

当前将API驱动的下拉选择封装为子组件的模式合理且符合Blazor最佳实践：

• 复用性：避免重复编写API调用、下拉渲染逻辑，可在多个表单中直接复用
• 关注点分离：子组件专注于下拉选项的获取与交互，主表单专注于业务逻辑与整体验证流程
• 可维护性：后续修改下拉逻辑（如API地址、选项过滤规则）只需修改子组件，不影响主表单代码

优化建议 #

• 将子组件抽象为通用组件，支持不同模型类型的属性绑定
• 封装通用验证触发方法，避免在子组件中重复编写验证逻辑

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