Blazor服务器端嵌套EditForm提交时子表单验证问题

方法1：使用包含子模型集合的父模型+共享EditContext #

这是最贴合Blazor原生设计的方案，让父模型直接包含职位集合，整个模型处于同一个EditContext下，提交时自动验证所有子项。

1. 定义包含职位集合的模型 #

public class Person
{
    [Required(ErrorMessage = "姓名不能为空")]
    public string Name { get; set; }

    [Range(18, 100, ErrorMessage = "年龄必须在18-100之间")]
    public int Age { get; set; }

    // 包含职位集合，自动参与父模型验证
    public List<Position> Positions { get; set; } = new List<Position>();
}

public class Position
{
    [Required(ErrorMessage = "职位名称不能为空")]
    public string JobTitle { get; set; }

    [Required(ErrorMessage = "部门不能为空")]
    public string Department { get; set; }
}

2. 父组件代码（无需嵌套独立EditForm） #

直接在父EditForm内循环渲染职位输入，或把职位编辑做成子组件但共享父验证上下文：

<EditForm Model="@person" OnValidSubmit="@SavePerson">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label>姓名：</label>
        <InputText @bind-Value="@person.Name" />
        <ValidationMessage For="@(() => person.Name)" />
    </div>

    <div>
        <label>年龄：</label>
        <InputNumber @bind-Value="@person.Age" />
        <ValidationMessage For="@(() => person.Age)" />
    </div>

    <h3>职位列表</h3>
    @foreach (var position in person.Positions)
    {
        <PositionEditor Position="@position" />
    }

    <button type="button" @onclick="@AddPosition">添加职位</button>
    <button type="submit">保存人员</button>
</EditForm>

@code {
    private Person person = new Person();

    private void AddPosition()
    {
        person.Positions.Add(new Position());
    }

    private void SavePerson()
    {
        // 验证通过，执行保存逻辑（如写入数据库或调用API）
    }
}

3. 职位编辑子组件（共享父EditContext） #

子组件无需单独创建EditForm，直接使用父组件传递的模型：

<div style="border:1px solid #eee; padding:10px; margin:10px 0;">
    <label>职位名称：</label>
    <InputText @bind-Value="@Position.JobTitle" />
    <ValidationMessage For="@(() => Position.JobTitle)" />

    <label>部门：</label>
    <InputText @bind-Value="@Position.Department" />
    <ValidationMessage For="@(() => Position.Department)" />
</div>

@code {
    [Parameter]
    public Position Position { get; set; }
}

这种方式下，父表单提交时DataAnnotationsValidator会自动验证Person模型及其包含的所有Position子项，任何子项验证失败都会阻止提交。

方法2：嵌套EditForm时手动触发子表单验证 #

如果必须保留独立的子EditForm（比如子表单是高复用组件），可通过引用子组件的EditContext，在父表单提交前手动触发验证并合并结果。

1. 子组件（带独立EditForm） #

子组件暴露自身的验证方法，供父组件调用：

<EditForm @ref="editForm" Model="@Position" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label>职位名称：</label>
        <InputText @bind-Value="@Position.JobTitle" />
        <ValidationMessage For="@(() => Position.JobTitle)" />
    </div>

    <div>
        <label>部门：</label>
        <InputText @bind-Value="@Position.Department" />
        <ValidationMessage For="@(() => Position.Department)" />
    </div>

    <button type="submit">添加职位</button>
</EditForm>

@code {
    [Parameter]
    public Position Position { get; set; }

    [Parameter]
    public EventCallback<Position> OnPositionAdded { get; set; }

    private EditForm editForm;

    // 暴露给父组件的验证方法
    public async Task<bool> Validate()
    {
        var isValid = editForm.EditContext.Validate();
        // 触发验证状态更新，确保错误消息显示
        await editForm.EditContext.NotifyValidationStateChangedAsync();
        return isValid;
    }

    private async Task HandleValidSubmit()
    {
        await OnPositionAdded.InvokeAsync(Position);
    }
}

2. 父组件代码 #

父组件引用所有子组件，提交前逐个验证子表单：

<EditForm Model="@person" OnSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label>姓名：</label>
        <InputText @bind-Value="@person.Name" />
        <ValidationMessage For="@(() => person.Name)" />
    </div>

    <div>
        <label>年龄：</label>
        <InputNumber @bind-Value="@person.Age" />
        <ValidationMessage For="@(() => person.Age)" />
    </div>

    <h3>职位列表</h3>
    @foreach (var (position, index) in person.Positions.Select((p, i) => (p, i)))
    {
        <PositionEditor @ref="positionEditors[index]" Position="@position" />
    }

    <button type="button" @onclick="@AddPosition">添加职位</button>
    <button type="submit">保存人员</button>
</EditForm>

@code {
    private Person person = new Person();
    private List<PositionEditor> positionEditors = new List<PositionEditor>();

    private void AddPosition()
    {
        person.Positions.Add(new Position());
        // 重置引用列表，确保子组件被正确绑定
        positionEditors.Clear();
    }

    private async Task HandleSubmit()
    {
        // 1. 先验证父模型
        var parentValid = EditContext.Validate();
        await EditContext.NotifyValidationStateChangedAsync();

        if (!parentValid) return;

        // 2. 逐个验证子表单
        bool allPositionsValid = true;
        foreach (var editor in positionEditors)
        {
            var positionValid = await editor.Validate();
            if (!positionValid) allPositionsValid = false;
        }

        if (!allPositionsValid) return;

        // 3. 所有验证通过，执行保存
        SavePerson();
    }

    private void SavePerson()
    {
        // 保存人员和职位数据
    }
}

关键注意点 #

• 方法1从根源避免了验证上下文隔离问题，是优先推荐的原生方案。
• 方法2需确保子组件的EditContext被正确引用，且验证后触发状态更新，保证错误消息正常显示。
• 两种方案均基于Blazor原生的EditContext和DataAnnotations验证，无需额外依赖库。

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