Blazor 应用程序中的 EditForm 有多个提交按钮

Question

我有一个简单的 Blazor Editform，其中有多个带有不同导航和 toast 通知的按钮。我已将 OnValidSubmit 附加到 Editform。现在验证适用于所有按钮。我添加了 onclick() 来触发按钮功能，但我希望仅在用户输入所有详细信息时才触发 onclick。希望我已经解释得很好。请让我知道以获取更多信息。

Forward 或 Next 按钮的当前输出是：如果没有输入值 -> 正确验证（要求填写详细信息）-> 显示转发通知。

预期输出： 如果没有输入值 -> 正确验证（要求填写详细信息）。 如果输入所有值 -> 正确验证 -> 显示转发通知。

这是一些代码：

 <EditForm EditContext="@editContext" OnValidSubmit="HandleValidSubmit"  @onreset="HandleReset">
            <DataAnnotationsValidator />
            <div class="form-row">
                <div class="form-group col">
                    <label>Role</label><br />
                    <InputRadioGroup @bind-Value="model.Role" class="form-control">
                        @foreach (var option in rdOptions)
                        {
                            <InputRadio Value="option" /> @option
                            <text>&nbsp;&nbsp;</text>
                        }
                    </InputRadioGroup>
                    <ValidationMessage For="@(() => model.Role)" />
                </div>
                <div class="form-group col">
                    <label>Company Name</label>
                    <InputSelect id="txtCompanyName" class="form-control" @bind-Value="@model.CompanyName">
                        <option selected value="-1">-Select-</option>
                        <option value="CompanyName1">CompanyName1</option>
                        <option value="CompanyName2">CompanyName2</option>
                    </InputSelect>
                    <ValidationMessage For="@(() => model.CompanyName)" />
                </div>
            </div>
         

            <div class="form-row">
                <div class="text-left col-3">
                    <button type="submit" class="btn btn-primary btn-success">Save</button>
                </div>
                <div class="text-right col-3">
                    <button type="submit" class="btn btn-primary" @onclick="@Forward">Forward</button>
                </div>
                <div class="text-right col-3">
                    <button type="submit" class="btn btn-primary" @onclick="@Review">Next</button>
                </div>
                <div class="text-right col-3">
                    <button type="reset" class="btn btn-secondary">Clear</button>
                </div>
            </div>
        </EditForm>

代码部分：

@code {
    private Model model = new Model();
    private EditContext editContext;
    List<Model> models = new();


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

    private void HandleValidSubmit()
    {
        var modelJson = JsonSerializer.Serialize(model, new JsonSerializerOptions { WriteIndented = true });
        JSRuntime.InvokeVoidAsync("alert", $"SUCCESS!! :-)\n\n{modelJson}");
        toastService.ShowSuccess("saved successfully!");
    }

    private void Forward()
    {
        toastService.ShowInfo("Forwarded!!");
    }

    private void Review()
    {
        toastService.ShowInfo("Review!!");
    }
    private void HandleReset()
    {
        model = new Model();
        editContext = new EditContext(model);
    }
}

Answer 1

您可以在按钮事件处理程序中手动进行验证，然后不使用EditForm OnValidSubmit，并将按钮类型设置为button。

...
if (editContext.Validate())
 go
else
 alert
...

仅供参考 - EditForm 的相关代码如下所示：

        private async Task HandleSubmitAsync()
        {
            Debug.Assert(_editContext != null);

            if (OnSubmit.HasDelegate)
            {
                // When using OnSubmit, the developer takes control of the validation lifecycle
                await OnSubmit.InvokeAsync(_editContext);
            }
            else
            {
                // Otherwise, the system implicitly runs validation on form submission
                var isValid = _editContext.Validate(); // This will likely become ValidateAsync later

                if (isValid && OnValidSubmit.HasDelegate)
                {
                    await OnValidSubmit.InvokeAsync(_editContext);
                }

                if (!isValid && OnInvalidSubmit.HasDelegate)
                {
                    await OnInvalidSubmit.InvokeAsync(_editContext);
                }
            }
        }

Answer 2

将type="submit" 更改为type="button"

也许保存按钮除外。