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

Question

我有一个简单的Blazor Editform，其中有多个具有不同导航的按钮&toast通知。我已将OnValidSubmit附加到Editform。现在，所有按钮的验证都在工作。我已经添加了onclick((来触发按钮函数，但我希望只有当用户输入了所有详细信息时才能触发onclick。希望我解释得好。请让我知道更多的意见。

"前进"或"下一步"按钮的当前输出为：如果未输入值->正确的验证(要求填写详细信息(->显示转发通知。

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

这里有一些代码：

<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!! :-)nn{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

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

除了"保存"按钮。

Answer 2

您可以在按钮事件处理程序中手动进行验证，然后不使用EditFormOnValidSubmit，并将按钮类型设置为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 3

在我看来，您需要使用JavaScript来检查输入是否已填充，在此基础上，您可以禁用或启用提交按钮