组件中的 Blazor 客户端 WASM 表单验证不起作用答案

【问题标题】：Blazor client WASM form validation in component not working组件中的 Blazor 客户端 WASM 表单验证不起作用
【发布时间】：2020-09-30 23:29:21
【问题描述】：

我无法在 Blazor WASM 客户端应用程序中从验证中正常工作。

将 InputText 元素封装到组件以进行紧凑布局不再执行正确执行的验证。

使用类似的模型

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>
...

验证不起作用！？

【问题讨论】：

您能否更新您粘贴的代码以显示 EditForm 的位置？另外，为什么您的可嵌入组件有@page 指令？你打算允许用户导航到/inputGroup吗？
@bind-data=customer.customerName 是不是打错字了？

标签： .net-core blazor webassembly

【解决方案1】：

你可以在子类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 answer 和 Microsoft docs 中获得灵感

【讨论】：