Issues with .NET MAUI Blazor app, MudBlazor, and FluentValidation in a MudForm

Description:

I'm currently working on my first .NET MAUI Blazor app and using MudBlazor for UI components. I'm trying to create a form using <MudForm> with the NewReservationViewModel, and I want to handle validation using FluentValidation.

Here's my form code:

<MudForm Model="@ViewModel" Validation="???">

    <MudSelect Label="Building" @bind-Value="@ViewModel.BuildingId" T="int?" Disabled="@IsFloorListDisabled" Required="true" ValueChanged="OnBuildingSelectionChanged">
        <MudSelectItem T="int?" Value="null">Select Building</MudSelectItem>
        @if (ViewModel.Buildings != null && ViewModel.Buildings.Count > 0)
        {
            @foreach (var building in ViewModel.Buildings)
            {
                <MudSelectItem T="int?" Value="@building.Id">@building.Name</MudSelectItem>
            }
        }
    </MudSelect>

    <MudSelect Label="Floor" @bind-Value="@ViewModel.FloorId" T="int?" Disabled="@IsFloorListDisabled" Required="true">
        <MudSelectItem T="int?" Value="null">Select Floor</MudSelectItem>
        @if (ViewModel.Floors != null && ViewModel.Floors.Count > 0)
        {
            @foreach (var floor in ViewModel.Floors)
            {
                <MudSelectItem T="int?" Value="@floor.Id">@floor.Name</MudSelectItem>
            }
        }
    </MudSelect>


    <MudDatePicker Label="Start Date" @bind-Date="@ViewModel.Start" Required="true"></MudDatePicker>

    <MudDatePicker Label="Finish Date" @bind-Date="@ViewModel.Finish" Required="true"></MudDatePicker>

    <MudButton Color="Color.Primary" Variant="Variant.Filled" Type="ButtonType.Submit">Search</MudButton>
</MudForm>

And here's the NewReservationViewModel:

public class NewReservationViewModel
{
    public int Id { get; set; }

    public DateTime? Start { get; set; }

    public DateTime? Finish { get; set; }

    public int? BuildingId { get; set; }
    public List<BuildingDto> Buildings { get; set; }

    public int? FloorId { get; set; }
    public List<FloorDto> Floors { get; set; }

    public string AreaTypes { get; set; }
}

I've also implemented a validator for the NewReservationViewModel:

public class NewReservationViewModelValidation : AbstractValidator<NewReservationViewModel>
{
    public NewReservationViewModelValidation()
    {
        RuleFor(model => model.Start).NotEmpty().WithMessage("bla bla bla");
        RuleFor(model => model.Finish).NotEmpty().WithMessage("bla bla bla")
            .GreaterThan(model => model.Start).WithMessage("bla bla bla");
        RuleFor(model => model.BuildingId).NotEmpty().WithMessage("bla bla bla");
        RuleFor(model => model.FloorId).NotEmpty().WithMessage("bla bla bla");
    }

    public Func<object, string, Task<IEnumerable<string>>> ValidateValue => async (model, propertyName) =>
    {
        try
        {
            var result = await ValidateAsync(ValidationContext<NewReservationViewModel>
                .CreateWithOptions((NewReservationViewModel)model, x => x.IncludeProperties(propertyName)));
            if (result.IsValid)
                return Array.Empty<string>();
            return result.Errors.Select(e => e.ErrorMessage);
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
            throw;
        }
    };
}

Questions:

Why am I unable to use ValueChanged="OnBuildingSelectionChanged" together with @bind-Value="@ViewModel.BuildingId"? I need know when a value is selected, to call the OnBuildingSelectionChanged method to populate the list of floors when a building is selected (Cascading drop down lists).

How can I display the form errors if there are any?

Any help or insights into these issues would be greatly appreciated. Thank you!

>Why am I unable to use ValueChanged="OnBuildingSelectionChanged" together with @bind-Value="@ViewModel.BuildingId"?

@bind-Value is kind of the short hand of using Value and ValueChanged. MS Docs.

<SomeComponent Value="_myValue" ValueChanged="HandleValueChanged"/>
<SomeComponent @bind-Value="_myValue"/>

When you use @bind-Value it handles the setting of the _myValue field when the ValueChanged EventCallback is fired. Whereas, when you use Value & ValueChanged together, you need to handle the setting of the _myValue field in the handler method i.e. HandleValueChanged.

That's why you can't use both @bind-Value and ValueChanged at the same time. So if you want to add your own custom logic when the Value property changes then you should use Value & ValueChanged

>How can I display the form errors if there are any?

You can use the Errors property in MudForm.

<MudForm @ref="form" @bind-Errors="@errors" @bind-IsValid="@success">
    //...
</MudForm>
@code{
    bool success;
    string[] errors = { };
}

In your specific code (unsure if intentional) you're missing assignment for the Validation property and each property you're validating needs to have a For property.

e.g.

<MudForm Model="@ViewModel" Validation="@(viewModelValidator.ValidateValue"> 
    <MudSelect For="@(() => ViewModel.BuildingId)" @bind-Value="@ViewModel.BuildingId" Label="Building" T="int?" Disabled="@IsFloorListDisabled" Required="true" ValueChanged="OnBuildingSelectionChanged">
        <MudSelectItem T="int?" Value="null">Select Building</MudSelectItem>
        @if (ViewModel.Buildings != null && ViewModel.Buildings.Count > 0)
        {
            @foreach (var building in ViewModel.Buildings)
            {
                <MudSelectItem T="int?" Value="@building.Id">@building.Name</MudSelectItem>
            }
        }
    </MudSelect>
    //...
</MudForm>
@code{
NewReservationViewModelValidation viewModelValidator= new();

}