Blazor client WASM form validation in component not working

问题

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!?

来源：https://stackoverflow.com/questions/62322383/blazor-client-wasm-form-validation-in-component-not-working

标签

.net

core

blazor

webassembly