[英]Blazor client WASM form validation in component not working
我在 Blazor WASM 客户端应用程序中无法从验证中正常工作。
将 InputText 元素封装到组件以进行紧凑布局不再执行正确执行的验证。
使用 model 之类的
public class Customer {
[Required]
[StringLength(100)
public string customerName {get; set;} = "";
}
以一种形式
<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>
验证工作正常!
但是为了模块化,我将内部的东西外包给了一个单独的组件
@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);
}
}
然后我把它放到我的表格中,比如
...
<div class="form-row">
<div class="form-group mb-0 col-sm-12">
<InputGroup label="Firma:" @bind-data=customer.customerName />
</div>
</div>
...
验证不起作用??
你可以在子类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>
}
和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; }
}
我从这个SO 答案和这个Microsoft 文档中获得了灵感
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.