Blazor中实现嵌套EditForm是否可行？

Blazor里不能直接嵌套EditForm，因为每个EditForm会生成独立的表单验证上下文，嵌套后会导致上下文冲突，验证和提交逻辑失效。正确的方案是用单个EditForm绑定CustomerModel，把多地址的输入作为主表单的一部分来处理，下面是具体实现步骤：

核心思路 #

用主EditForm绑定CustomerModel实例，地址列表作为CustomerModel.Addresses的子项，直接在主表单内渲染每个地址的输入控件，通过动态添加/移除地址项来实现多地址采集，最后统一提交整个Customer对象。

具体实现步骤 #

1. 初始化Customer实例 #

在组件代码块中初始化Customer，确保Addresses集合不为空，避免空引用错误：

@code {
    private CustomerModel customer = new CustomerModel
    {
        Addresses = new List<AddressModel>()
    };

    private void AddNewAddress()
    {
        customer.Addresses.Add(new AddressModel());
    }

    private async Task HandleSubmit()
    {
        // 这里处理提交逻辑，比如调用API保存客户和地址
        Console.WriteLine("提交客户信息");
    }
}

2. 主表单与地址输入渲染 #

在razor模板中，用单个EditForm绑定customer，包含客户基本信息输入，然后遍历Addresses渲染每个地址的输入控件，同时添加"添加新地址"按钮：

<EditForm Model="@customer" OnValidSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <!-- 客户基本信息 -->
    <div>
        <label>FirstName:</label>
        <InputText @bind-Value="customer.FirstName" />
        <ValidationMessage For="@(() => customer.FirstName)" />
    </div>
    <div>
        <label>LastName:</label>
        <InputText @bind-Value="customer.LastName" />
        <ValidationMessage For="@(() => customer.LastName)" />
    </div>

    <!-- 地址列表 -->
    <h3>地址信息</h3>
    @foreach (var address in customer.Addresses)
    {
        <div style="border:1px solid #eee; padding:10px; margin:10px 0;">
            <div>
                <label>FirstLine:</label>
                <InputText @bind-Value="address.FirstLine" />
                <ValidationMessage For="@(() => address.FirstLine)" />
            </div>
            <div>
                <label>SecondLine:</label>
                <InputText @bind-Value="address.SecondLine" />
            </div>
            <div>
                <label>Town:</label>
                <InputText @bind-Value="address.Town" />
                <ValidationMessage For="@(() => address.Town)" />
            </div>
            <div>
                <label>Region:</label>
                <InputText @bind-Value="address.Region" />
                <ValidationMessage For="@(() => address.Region)" />
            </div>
            <div>
                <label>PostalCode:</label>
                <InputText @bind-Value="address.PostalCode" />
                <ValidationMessage For="@(() => address.PostalCode)" />
            </div>
            <div>
                <label>Country:</label>
                <InputText @bind-Value="address.Country" />
                <ValidationMessage For="@(() => address.Country)" />
            </div>
        </div>
    }

    <!-- 添加新地址按钮 -->
    <button type="button" @onclick="AddNewAddress">添加新地址</button>

    <!-- 提交按钮 -->
    <button type="submit">提交客户信息</button>
</EditForm>

3. 可选：封装地址输入为子组件 #

如果地址输入逻辑复杂，可以把地址输入封装成独立子组件，让代码更清晰：

AddressInput.razor

<div style="border:1px solid #eee; padding:10px; margin:10px 0;">
    <div>
        <label>FirstLine:</label>
        <InputText @bind-Value="Address.FirstLine" />
        <ValidationMessage For="@(() => Address.FirstLine)" />
    </div>
    <!-- 其他地址字段省略，和上面一致 -->
</div>

@code {
    [Parameter, Required]
    public AddressModel Address { get; set; }
}

然后在主组件中替换遍历部分：

@foreach (var address in customer.Addresses)
{
    <AddressInput Address="@address" />
}

验证说明 #

整个表单的验证由主EditForm的DataAnnotationsValidator统一处理，所有字段（包括地址的必填项）都会在提交时触发验证，只有全部验证通过才会执行HandleSubmit方法。

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