Custom Validation Message Component in Blazor

Question

I created a custom validation message component in Blazor like this:

<div class="text-danger">
   <ValidationMessage For="@(()=>model)"/>
</div>

@code {
    [Parameter]
    public object model { get; set; }
}

and I have a class:

public class LoginViewModel
{
    [Required(ErrorMessage = "please enter {0}")]
    public string PhoneNumber { get; set; }
}

then I use this component in a razor page:

<CustomClientValidation model=@(LoginModel.PhoneNumber)/>

and with an object defined in the code section of the page:

LoginViewModel LoginModel;

but after running the application, even though the PhoneNumber is null, the validation message is not displayed. Where is my mistake?

score 0 · Answer 1 · answered Mar 31 '23 at 17:53

You can pass the Expression like this:

@using System.Linq.Expressions;
@typeparam TValue

<div class="text-danger">
    <ValidationMessage For=@this.For />
</div>

@code {
    [Parameter, EditorRequired] public Expression<Func<TValue>>? For { get; set; }
}

Or simply inherit directly from ValidationMessage like this:

@inherits ValidationMessage<TValue>
@typeparam TValue

<div class="text-danger">
    @this.BaseContent
</div>

@code {
    // Read only property to get the base component content
    private RenderFragment BaseContent => (builder) => base.BuildRenderTree(builder);
}

If this worked, then please mark the question as answered. No one else will then try and answer it. — MrC aka Shaun Curtis, Apr 01 '23 at 08:33

Custom Validation Message Component in Blazor

1 Answers1