How to use Blazor ValidationMessage on properties made from custom objects

Question

How do we make the ValidationMessageFor include the child objects when validating?

My classes look like this:

public class Person
{
    public Person()
    {
        Name = "";
        FavoriteGame = "";
    }

    [Required(ErrorMessage = "Person's name is required and must not be empty.")]
    public string Name { get; set; }

    public string FavoriteGame { get; set; }
}

public class Team
{
    public Team()
    {
        Name = "";
        Game = "";
        Coach = new Person();
    }

    [Required(ErrorMessage = "Team name is required and must not be empty.")]
    public string Name { get; set; }

    public string Game { get; set; }

    public Person Coach { get; set; }
}

And my Blazor EditForm looks like this:

<EditForm Model="@myTeam" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="row p-4">
        <label>Team Name:</label>
        <InputText id="name" @bind-Value="@myTeam.Name" />
        <ValidationMessage For="@(() => myTeam.Name)" />
    </div>

    <div class="row p-4">
        <label>Team Game:</label>
        <InputText id="name" @bind-Value="@myTeam.Game" />
        <ValidationMessage For="@(() => myTeam.Game)" />
    </div>

    <div class="row p-4">
        <label>Coach Name:</label>
        <InputText id="name" @bind-Value="@myTeam.Coach.Name" />
        <ValidationMessage For="@(() => myTeam.Coach.Name)" />
    </div>

    <div class="row p-4">
        <label>Coach's Favorite Game:</label>
        <InputText id="name" @bind-Value="@myTeam.Coach.FavoriteGame" />
        <ValidationMessage For="@(() => myTeam.Coach.FavoriteGame)" />
    </div>

    <div class="row p-4">
        <button type="submit" class="btn btn-success">Submit</button>
    </div>
</EditForm>

But during runtime, only the validation in class Team gets displayed...the validation of class Person gets skipped, and does not get invoked or displayed during runtime.

Is there a simple way of getting the ValidationMessageFor to work for class properties that are made of custom objects without getting into creating a whole new custom validator or a custom ValidationMessageFor component?

App Pack · Accepted Answer · 2020-10-23 07:02:58Z

5

Please see the blazor documentation here: https://learn.microsoft.com/en-gb/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1#nested-models-collection-types-and-complex-types

essentially you need to use the ObjectGraphDataAnnotationsValidator in the blazor form, and [ValidateComplexType] attribute

answered Oct 23, 2020 at 7:02

App Pack

1,54211 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GAC Over a year ago

Thank you thank you @AppPack for the very easy and simple solution and pointing me to the right direction!

SSlinky Over a year ago

Would it be better practice to use a View Model that has those fields / validations?

GAC · Accepted Answer · 2020-10-23 08:35:38Z

3

Learning from documentation pointed by @AppPack, these are the only changes needed to make this work:

Install Microsoft.AspNetCore.Components.DataAnnotations.Validation (prerelease) package
Use [ValidateComplexType] on the complex property (code sample below)

[ValidateComplexType] public Person Coach { get; set; }
Replace DataAnnotationsValidator with ObjectGraphDataAnnotationsValidator in the razor page

answered Oct 23, 2020 at 8:35

GAC

4111 gold badge7 silver badges19 bronze badges

1 Comment

qqtf Over a year ago

code-maze.com/complex-model-validation-in-blazor for more detailed info

Collectives™ on Stack Overflow

How to use Blazor ValidationMessage on properties made from custom objects

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related