如何解决Blazor多EditForm互相阻塞提交的问题？

问题原因 #

Blazor中默认情况下，页面内多个EditForm可能因共享全局验证状态（或组件库实现未隔离验证上下文），导致单个表单的验证错误会阻塞其他表单的提交操作。

方案一：让表单独立验证，忽略其他表单错误 #

通过为每个EditForm手动创建独立的EditContext，确保每个表单的验证状态完全隔离，提交时仅校验当前表单内容。

步骤1：在代码逻辑中创建独立EditContext #

// 表单模型示例
private VoipAccountModel _voipAccount_Account = new();
// 为该表单创建专属的EditContext
private EditContext _accountEditContext;

protected override void OnInitialized()
{
    _accountEditContext = new EditContext(_voipAccount_Account);
}

步骤2：修改EditForm绑定独立EditContext #

<EditForm EditContext="@_accountEditContext" OnValidSubmit="@SubmitForm_Account">
    <!-- 指定ValidationSummary关联当前EditContext -->
    <Blazorize.ValidationSummary EditContext="@_accountEditContext" />
    <DataAnnotationsValidator />

    <label for="portNumber">需要转移的号码</label>
    <div class="input-group">
         <InputText class="form-control" id="NumberToPort" @bind-Value="_voipAccount_Account.NumberToPort" />
     </div>

     <ValidationMessage For="@(() => _voipAccount_Account.NumberToPort)" />
     <button type="submit" class="btn btn-info">保存修改</button>
</EditForm>

所有标签页的表单重复上述操作，即可实现表单提交互不干扰，仅校验当前表单的验证规则。

方案二：提交前检查所有表单，提示用户修正错误 #

如果需要在提交某表单时，检查页面内所有表单的验证状态，提示用户处理未提交的错误，可按以下方式实现：

步骤1：保存所有表单的EditContext引用 #

private EditContext _accountEditContext;
private EditContext _profileEditContext; // 假设存在第二个表单
// 存储所有表单的EditContext集合
private List<EditContext> _allFormContexts = new();

protected override void OnInitialized()
{
    _accountEditContext = new EditContext(_voipAccount_Account);
    _profileEditContext = new EditContext(_profileModel);
    
    _allFormContexts.Add(_accountEditContext);
    _allFormContexts.Add(_profileEditContext);
}

步骤2：提交前校验所有表单状态 #

private async Task SubmitForm_Account()
{
    // 先校验当前表单是否有效
    if (!_accountEditContext.Validate())
    {
        return; // 当前表单有错误，终止提交
    }

    // 检查其他表单是否存在未修正的错误
    bool hasUnfixedErrors = _allFormContexts
        .Where(ctx => ctx != _accountEditContext)
        .Any(ctx => !ctx.Validate());

    if (hasUnfixedErrors)
    {
        // 弹出提示，可替换为项目中使用的弹窗/Toast组件
        await JSRuntime.InvokeVoidAsync("alert", "其他标签页的表单存在未修正的错误，请先检查并修改");
        return;
    }

    // 执行表单提交逻辑
    // ...
}

步骤3：表单绑定EditContext #

每个表单同样按照方案一的方式，绑定各自手动创建的EditContext即可。

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