Blazor无提交按钮按Ctrl+S提交EditForm不显示校验错误怎么解决

你直接通过快捷键调用Submit()方法的逻辑绕开了EditForm的原生提交流程：EditForm只有在接收到原生表单提交事件时，才会自动触发FluentValidation校验、将错误信息同步到页面对应的校验提示控件中。你在Submit()中手动执行的校验结果没有同步给EditForm的上下文，因此页面不会渲染错误提示。

方案1：触发EditForm原生提交流程（更推荐） #

完全复用EditForm内置逻辑，无需自己处理校验和错误同步，也避免重复校验的冗余代码：

1. 给EditForm绑定EditContext
2. 快捷键触发时调用EditContext.Submit()走完整提交流程，校验通过才会自动触发OnValidSubmit绑定的Submit方法，校验失败则自动展示UI错误提示

代码示例 #

<EditForm Model="@model" EditContext="@editContext" OnValidSubmit="Submit">
    <FluentValidationValidator />
    <!-- 原有表单字段、ValidationMessage 控件 -->
    <button type="submit">save</button>
</EditForm>

@code
{
    [Parameter] public CategoryInfo model { get; set; } = new();
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(model);
    }

    // Ctrl+S 快捷键绑定此方法，替代原来直接绑定的Submit
    private void HotKeySaveHandler()
    {
        editContext?.Submit();
    }

    private async Task Submit()
    {
        // 此处无需再手动校验，OnValidSubmit 触发就代表校验已通过
        // 直接写保存逻辑即可
        // ...
    }
}

方案2：手动同步校验结果到EditContext #

如果你需要保留手动校验的逻辑，可以将FluentValidation返回的错误结果同步到EditContext中，触发UI刷新错误提示：

代码示例 #

private async Task Submit()
{
    var validator = new CategoryValidator();
    var result = validator.Validate(model);
    editContext?.ClearValidationErrors();
    
    if (result.IsValid)
    {
        // 保存逻辑
        // ...
    }
    else
    {
        if(editContext != null)
        {
            // 遍历校验错误同步到EditContext
            foreach (var error in result.Errors)
            {
                editContext.AddValidationError(
                    new FieldIdentifier(model, error.PropertyName), 
                    error.ErrorMessage
                );
            }
            // 通知UI校验状态更新，渲染错误提示
            editContext.NotifyValidationStateChanged();
        }
    }
}

更推荐使用方案1，完全复用Blazor表单原生能力，代码更简洁，也不会出现校验规则两边不一致的问题。

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