I am having trouble getting form validation to work properly in a Blazor WASM client application.
When an InputText element is encapsulated in a Blazor component, the InputText no longer performs validation.
When using a model like
public class Customer { [Required] [StringLength(100)] public string customerName {get; set;} = "";}in the 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 when creating a modular Blazor 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); }}and then using it in this form
...<div class="form-row"><div class="form-group mb-0 col-sm-12"><InputGroup label="Firma:" @bind-data=customer.customerName /></div></div>...the validation does not work!?