Blazor应用程序中的EditForm有多个提交按钮
Blazor应用程序中的EditForm有多个提交按钮
提问于 2021-06-25 16:27:33
我有一个简单的Blazor Editform，其中我有多个按钮与不同的导航&吐司通知。我有OnValidSubmit附加到编辑表单。现在，验证对所有按钮都起作用了。我已经添加了onclick()来触发按钮函数，但我希望onclick仅在用户输入所有详细信息时才被触发。希望我已经解释好了。请让我知道更多的输入。
“前进”或“下一步”按钮的当前输出为:如果未输入任何值，请进行正确的验证(要求填写详细信息)并显示->转发通知。
预期输出:如果未输入任何值，则验证->是否正确(要求填写详细信息)。如果输入的所有值都正确，则会显示-> validation -> forward通知。
下面是一些代码：
<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> </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);
}
}Stack Overflow用户
回答已采纳
发布于 2021-06-25 19:03:07
您可以在按钮事件处理程序中手动执行验证，然后不使用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);
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68127848
复制相关文章
相似问题
腾讯云开发者
