- 首页
- C#
- 组件中的 Blazor 客户端 WASM 表单验证不起作用
组件中的 Blazor 客户端 WASM 表单验证不起作用
[英] Blazor client WASM form validation in component not working
本文介绍了组件中的 Blazor 客户端 WASM 表单验证不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 Blazor WASM 客户端应用程序中无法从验证中正常工作.
将 InputText 元素封装到组件以进行紧凑布局不再执行以其他方式正确执行的验证.
使用类似的模型
public class Customer {[必需的][字符串长度(100)公共字符串 customerName {get;设置；} ="；}
以
的形式
<DataAnnotationsValidator/><验证摘要/><div class="form-row"><div class="form-group mb-0 col-sm-12"><div class="input-group input-group-sm mb-1 mt-1"><div class="input-group-prepend"><span class="input-group-text" style="width:6em;">公司</span>
<InputText type="text" class="form-control" @bind-Value=customer.customerName/>
</EditForm>
验证工作正常！
但是为了模块化，我将内部的东西外包给一个单独的组件
@page "/inputGroup"<div class="input-group input-group-sm mb-1 mt-1"><div class="input-group-prepend"><span class="input-group-text" style="width:6em;">@label</span>
<InputText type=@type class="form-control" @bind-Value=@data @oninput=@onChange/>
@代码 {[范围]公共字符串标签{get;set;} = "标签:";[范围]公共字符串类型 {get;设置；} =文本"；[范围]公共字符串数据{get;设置；} ="；[范围]公共 EventCallback数据改变{get;放;}私人任务 onChange(ChangeEventArgs e) {数据=(字符串)e.Value;返回 dataChanged.InvokeAsync(data);}}然后我把它放到我的表单中，就像
...<div class="form-row"><div class="form-group mb-0 col-sm-12"><InputGroup label="公司:"@bind-data=customer.customerName/>
...
验证无效！?
解决方案
你可以在子类化 InputText
的地方做这样的事情InputTextGroup.razor
@inherits Microsoft.AspNetCore.Components.Forms.InputText<div class="mt-1"><输入类型=文本"id=@Id"@attributes="@AdditionalAttributes";@bind="@CurrentValueAsString";class="@CssClass myOtherCssClasses";/>@if (ValidationFor != null){<div class="myValidationClass"><ValidationMessage For="ValidationFor";/>
}
和InputTextGroup.razor.cs
公共部分类 InputTextGroup{[参数] public string Id { get;放;} = HeadlessUI.HtmlElement.GenerateId();[参数] 公共字符串?标签{得到;放;}[参数] public Expression?ValidationFor { 获取；放;}}
我从这个 SO answer 和这个 微软文档
Im having trouble getting from validation to work properly in a Blazor WASM client application.
Encapsulating an InputText element to a component for compact layout does no longer perform validation that is executed correctly otherwise.
using model like
public class Customer {
[Required]
[StringLength(100)
public string customerName {get; set;} = "";
}
in a form of
<EditForm Model=@customer>
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-row">
<div class="form-group mb-0 col-sm-12">
<div class="input-group input-group-sm mb-1 mt-1">
<div class="input-group-prepend">
<span class="input-group-text" style="width:6em;">Firma</span>
</div>
<InputText type="text" class="form-control" @bind-Value=customer.customerName />
</div>
</div>
</EditForm>
the validation works fine!
But to modularize I outsource the inner stuff to an separate component
@page "/inputGroup"
<div class="input-group input-group-sm mb-1 mt-1">
<div class="input-group-prepend">
<span class="input-group-text" style="width:6em;">@label</span>
</div>
<InputText type=@type class="form-control" @bind-Value=@data @oninput=@onChange />
</div>
@code {
[Parameter]
public string label {get; set;} = "Label:";
[Parameter]
public string type {get; set;} = "text";
[Parameter]
public string data {get; set;} = "";
[Parameter]
public EventCallback<string> dataChanged {get; set;}
private Task onChange(ChangeEventArgs e) {
data = (string)e.Value;
return dataChanged.InvokeAsync(data);
}
}
Then I put this to my form, like
...
<div class="form-row">
<div class="form-group mb-0 col-sm-12">
<InputGroup label="Firma:" @bind-data=customer.customerName />
</div>
</div>
...
the validation is not working!?
解决方案
You could do something like this where you subclass InputText
InputTextGroup.razor
@inherits Microsoft.AspNetCore.Components.Forms.InputText
<div class="mt-1">
<input type="text" id="@Id"
@attributes="@AdditionalAttributes" @bind="@CurrentValueAsString"
class="@CssClass myOtherCssClasses" />
</div>
@if (ValidationFor != null)
{
<div class="myValidationClass">
<ValidationMessage For="ValidationFor" />
</div>
}
And InputTextGroup.razor.cs
public partial class InputTextGroup
{
[Parameter] public string Id { get; set; } = HeadlessUI.HtmlElement.GenerateId();
[Parameter] public string? Label { get; set; }
[Parameter] public Expression<Func<string>>? ValidationFor { get; set; }
}
I took inspiration from this SO answer and this Microsoft docs
这篇关于组件中的 Blazor 客户端 WASM 表单验证不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
