MudBlazor：How to validate a list object in EditForm？

Question

Here is my test code. It always pass to the "Send" Method when click the submit button even if have not inputted anything.

@page "/ValidationTest";

@inject IDialogService DialogService;


<EditForm Model="@Persons" OnValidSubmit="Send">
    @foreach(Person person in Persons)
    {
        <MudTextField @bind-Value="person.Name" For="@(()=>person.Name)" />
    }
    <MudIconButton ButtonType="ButtonType.Submit" Icon="@Icons.Material.Filled.Send" />
</EditForm>


@code{
    class Person
    {
        [System.ComponentModel.DataAnnotations.Required]
        public string Name { get; set; } = null!;
    }

    Person[] Persons = new Person[]
    {
        new Person(),new Person()
    };

    void Send()
    {
        this.DialogService.ShowMessageBox("Error","Pass！");
    }
}

come here to have a try: https://try.mudblazor.com/snippet/GEwHkSklPGDTqQJw

Thanks in advance for any help!

Answer 1

You're missing a <DataAnnotationsValidator /> in your <EditForm>. However, this only validates top-level primitive properties of the model & therefore will not validate your array.

There is an experimental Microsoft.AspNetCore.Components.DataAnnotations.Validation package that provides an <ObjectGraphDataAnnotationsValidator> for validating arrays, collections & more complex types. See Blazor data annotations validation package for more info.

If you install the package, then try the following code...

@page "/ValidationTest";
@using System.ComponentModel.DataAnnotations;
@inject IDialogService DialogService;

<EditForm Model="@Persons" OnValidSubmit="Send">
    <ObjectGraphDataAnnotationsValidator />
    @foreach (Person person in Persons)
    {
        <MudTextField @bind-Value="person.Name" For="@(() => person.Name)"/>
    }
    <MudIconButton ButtonType="ButtonType.Submit" Icon="@Icons.Material.Filled.Send"/>
</EditForm>

@code {
    class Person
    {
        [Required]
        public string Name { get; set; } = null!;
    }

    Person[] Persons = new Person[]
    {
        new Person(),new Person()
    };

    void Send()
    {
        this.DialogService.ShowMessageBox("Error", "Pass！");
    }
}

I've tested this locally, but I can't share an online snippet because of the additional package.