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

How do I use within a component

$
0
0

Please note that although this is closely related to this question, the answer there is specific to one known model property, whereas I want this to work for any property, so the component is reusable.

I want to use the Blazor <ValidationMessage> tag within a component. However, when I do this, the validation message isn't shown.

For example, the following component (FormRowText.razor) creates a row (in the Bootstrap grid sense) containing an <input type="text /> for a named property on a model...

<div class="form-group row"><label for="@PropertyName" class="col-lg-2 col-form-label">@(Caption ?? PropertyName)</label><div class="col-lg-10 input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-@Icon"></i></span></div><input class="form-control" Value="@Value" type="text"           id="@PropertyName" name="@PropertyName" @onchange="@OnChanged" /></div></div>@code {  [Parameter]  public string PropertyName { get; set; }  [Parameter]  public string Value { get; set; }  [Parameter]  public EventCallback<string> ValueChanged { get; set; }  [Parameter]  public string Caption { get; set; }  [Parameter]  public string Icon { get; set; }  private async Task OnChanged(ChangeEventArgs cea) =>    await ValueChanged.InvokeAsync(cea.Value?.ToString() ?? "");}

It is used like this...

<EditForm ...><FormRowText PropertyName="@nameof(Customer.Email)" @bind-Value="_customer.Email" Icon="at" /></EditForm>

If I add a <ValidationMessage> after this markup, it works fine, but if I add it inside the component (which is where I want it to be), it doesn't work.

I saw this answer from @enet, which shows how to do this for a specific, known model property. However, my component is designed to work with any model property, and I'm not sure how to modify it.

I tried adding a parameter for the model (with @typeparam T at the top of the file)...

[Parameter]public T Model { get; set; }

...and adding the following inside the HTML...

<ValidationMessage For="() => PropertyName" />

However this doesn't work.

Any ideas?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



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