Blazor 如何在没有提交按钮的情况下提交表单

Question

在一个 blazor 项目中，我使用 Editform 和 Fluentvalidation 以及 Toolbelt.Blazor.HotKeys 作为快捷方式 (ctrl+s) 来提交表单 当我按 ctrl+s 时，会调用 Submit() 方法，但如果表单有错误，则不会显示错误。其实只调用了方法，没有调用提交表单。 你对这个问题有什么建议？

<EditForm Model="@model" OnValidSubmit="Submit">
            <FluentValidationValidator />
         ...
          <button type="submit" >save</button>
        </EditForm>

@code
{
 [Parameter] public CategoryInfo model { get; set; } = new();
 private async Task Submit()
    {
        var validator = new CategoryValidator();
        var result = validator.Validate(model);
        if (result.IsValid)
        {
            ...
        }
    }
}

Answer 1

这是一个有效的单页组件，它演示了在<CTL>S 上实现表单提交所需的代码。为简单起见，我使用了DataAnnotationsValidator。有内联的 cmets 来解释方法。

@page "/"
@implements IDisposable
@using Toolbelt.Blazor.HotKeys
@using System.ComponentModel.DataAnnotations;

<h3>EditForm</h3>

<EditForm EditContext="this._editContext" OnValidSubmit="ValidSubmitForm" OnInvalidSubmit="InvalidSubmitForm">
    <DataAnnotationsValidator />
    <div class="p-2">
        <span>Value (100-200):</span>
        <InputNumber @bind-Value="_model.Value" />
        <ValidationMessage For="() => _model.Value"/>
    </div>
    <div class="m-2 p-2">
        <button class="btn btn-success" type="submit">Submit</button>
    </div>
</EditForm>
<div class="m-2 p-2">
    <span>@message</span>
</div>
<div class="m-2 p-2">
    <button class="btn btn-danger" type="button" @onclick="SubmitFormExternally">Submit Form Externally</button>
</div>


@code {
    private string message;

    private Model _model = new Model();

    [Inject] private HotKeys hotKeys { get; set; }

    private HotKeysContext _hotKeysContext;

    EditContext _editContext;

    // Explicitly setup the Edit context so we have a reference to it
    protected override void OnInitialized()
    {
        _editContext = new EditContext(_model);
        _hotKeysContext = this.hotKeys.CreateContext()
         .Add(ModKeys.Ctrl, Keys.S, SubmitFormCtlS, "Submit form");

    }

    // Invalid handler
    private Task ValidSubmitForm()
    {
        message = $"Valid Form Submitted at :{DateTime.Now.ToLongTimeString()}";
        return Task.CompletedTask;
    }

    // Valid Handler
    private Task InvalidSubmitForm()
    {
        message = $" Invalid Form Submitted at :{DateTime.Now.ToLongTimeString()}";
        return Task.CompletedTask;
    }

    // Method to call from external button
    // Works and component updates as it's a Blazor Component event
    // emulates the private HandleSubmitAsync method in EditForm
    private async Task SubmitFormExternally()
    {
        if (_editContext.Validate())
            await this.ValidSubmitForm();
        else
            await this.InvalidSubmitForm();
    }

    // Method to call from shortcut key
    // The shortcut key mechanism does't wrap the call in a Blazor Component event
    // So we wrap the code within one
    // The code emulates the private HandleSubmitAsync method in EditForm
    private async Task SubmitFormCtlS()
    {
        var task = Task.CompletedTask;
        if (_editContext.Validate())
            task = this.ValidSubmitForm();
        else
            task = this.InvalidSubmitForm();
        this.StateHasChanged();
        if (!task.IsCompleted || task.IsCanceled)
        {
            await task;
            this.StateHasChanged();
        }
    }

    public void Dispose()
    {
        _hotKeysContext.Dispose();
    }

    // Quick Model Class
    public class Model
    {
        [Range(100, 200, ErrorMessage = "Must be between 100 and 200")]
        public int Value { get; set; } = 0;
    }
}