MudForm validation on multiple tabs

Question

I have multiple tabs with a form inside.

<MudTabs Elevation="4" Rounded="true" Centered="true" Color="@Color.Primary">
    <MudTabPanel Text="@formA.model.Name" Style="@GetRed(formA.form?.Errors.Any())">
        <CustomForm @ref="formA" model="formA.model" />
    </MudTabPanel>
    <MudTabPanel Text="@formB.model.Name" Style="@GetRed(formB.form.Errors.Any())">
        <CustomForm @ref="formB" model="formB.model" />
    </MudTabPanel>
    <MudTabPanel Text="@formC.model.Name" Style="@GetRed(formC.form.Errors.Any())">
        <CustomForm  @ref="formC" model="formC.model" />
    </MudTabPanel>
    <MudButton OnClick="ValidateForms" >ValidateForms</MudButton>
</MudTabs>

    public async Task ValidateForms(){
        bool isValid = true;
        isValid &= await formA.Validate();
        isValid &= await formB.Validate();
        isValid &= await formC.Validate();
        if(isValid){
            // Continue
        }
    }

    public async Task<bool> Validate()
    {
        await form.Validate();
        return form.IsValid;
    }

I would like to validate all forms at once and display the correspondending tab in a red border if any validation error occurs. And if switching tabs the fields should be marked as errors. But it seems like if a form (or its fields) isn't rendered, the validation automatically succeeds. It is working for the activated tab.

Snippet: https://try.mudblazor.com/snippet/GEcRlmbbTAGxcXkw

As a workaround I could add Properties to the FormModel i.e. NameHasErrors and handle everything manually, which works. But I'd like to keep the code simpler.

Is there a straightforward method? Or do I have to use the workaround?

Answer 1

You need to set the KeepPanelsAlive to true.

From MudBlazor docs

If true, render all tabs and hide (display:none) every non-active.

<MudTabs KeepPanelsAlive="true" Elevation="4" Rounded="true" Centered="true" Color="@Color.Primary">
    <MudTabPanel Text="@formA.model.Name" Style="@GetRed(formA.form?.Errors.Any())">
        <CustomForm @ref="formA" model="formA.model" />
    </MudTabPanel>
    <MudTabPanel Text="@formB.model.Name" Style="@GetRed(formB.form.Errors.Any())">
        <CustomForm @ref="formB" model="formB.model" />
    </MudTabPanel>
    <MudTabPanel Text="@formC.model.Name" Style="@GetRed(formC.form.Errors.Any())">
        <CustomForm  @ref="formC" model="formC.model" />
    </MudTabPanel>
    <MudButton OnClick="ValidateForms" >ValidateForms</MudButton>
</MudTabs>

MudBlazor Snippet