Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor client WASM form validation in component not working

$
0
0

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


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>