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?