Blazor 模态表单验证：删除表单字段时，您必须单击取消按钮两次以关闭模态

Question

在 Blazor 中，我为 CRUD 使用模态对话框。当我打开一个模态来编辑记录并删除（例如）用户名然后直接单击“取消”按钮时，表单验证仍然会启动。模态不会关闭。

我需要再次单击取消按钮来关闭模式。

我知道我可以将取消按钮放在 之外EditForm，但是您会在对话框关闭之前看到一条验证消息闪烁。我希望在模态页脚中我的提交按钮旁边有我的取消按钮。

当我按下“取消”按钮时，有什么方法可以覆盖表单验证？而且我宁愿不想使用 JavaScript Interop，而只想使用普通的 Blazor。

工作代码示例：

@page "/cancel"
@using System.ComponentModel.DataAnnotations;

<h3>Cancel Validation</h3>

<button type="submit" class="btn btn-primary" @onclick="Login">Login</button>
<hr />
<p>Status: @status</p>

@if (showModal)
{
    <div class="modal" tabindex="-1" role="dialog" style="display:block" id="taskModal">
        <div class="modal-dialog shadow-lg bg-white rounded" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Login</h5>
                </div>
                <div class="modal-body">
                    <EditForm Model="user" OnValidSubmit="HandleValidSubmit">
                        <DataAnnotationsValidator />
                        <ValidationSummary />
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Email: </label>
                            <InputText class="col-8 form-control" @bind-Value="user.Email" />
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Password: </label>
                            <InputText type="password" class="col-8 form-control" @bind-Value="user.Password" />
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-secondary" @onclick="CancelSubmit">Cancel</button>
                        </div>
                    </EditForm>
                </div>
            </div>
        </div>
    </div>
}

@code {

    public class UserLogin
    {
        [Required(ErrorMessage = "Email is required")]
        public string Email { get; set; }

        [Required(ErrorMessage = "Password is required")]
        public string Password { get; set; }
    }

    UserLogin user = new UserLogin();

    bool showModal;
    string status;

    protected override void OnInitialized()
    {
        showModal = false;
        status = "Init";
        // for demo purposes, if you delete user.Email in the login dialog, you'll need to press 'Cancel' 2 times.
        user.Email = "user@example.com";
        user.Password = "12345";
    }

    private void Login()
    {
        status = "Show Login Modal";
        showModal = true;
    }

    private void HandleValidSubmit()
    {
        status = "Valid Submit";
        showModal = false;
    }

    private void CancelSubmit()
    {
        status = "Cancelled"; 
        showModal = false;
    }
}

Answer 1

今天我发现了一个更简单的解决方案......只需使用 <div> 而不是 <button> :)

因此，只需将取消按钮更改为：

   <div type="button" class="btn btn-secondary" @onclick="CancelSubmit">Cancel</div>
               

这样验证不会被触发，但你的服务器端代码仍然会正常执行。