mudblazor

How do I dynamically enable/disable a button on a Mudblazor form when it's validity changes?


If a field in a MudForm fails validation, I want to disable the button that performs an action. e.g. if the user tabs out of the required text field on this example form and leaves the field blank, the "Create" button becomes disabled. I've tried a few different things but so far no luck. The most recent thing I've tried is setting the button's Disabled field based on the form's IsValid field thinking it might automatically get handled through binding but it doesn't do anything.

Here's the razor file:

<MudButton Variant="Variant.Filled" OnClick="HandleClick">Test</MudButton>

<MudMessageBox @ref="TestMessageBox" Title="Validation Test" CancelText="Cancel">
    <MessageContent>
        <MudForm @ref="TestForm">
            <AntiforgeryToken />
            <MudTextField @bind-Value="RequiredTextValue" Label="Required field"
                          Required />
            <MudTextField @bind-Value="OptionalTextValue" Label="Optional field"/>
        </MudForm>
    </MessageContent>
    <YesButton>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="PerformCreation"
                   Disabled="TestForm.IsValid == false">Create</MudButton>
    </YesButton>
</MudMessageBox>

and here's the code:

public partial class TestButton
{
    private MudMessageBox TestMessageBox { get; set; } = null!;

    public MudForm TestForm { get; set; } = null!;

    public string RequiredTextValue { get; set; } = string.Empty;

    public string OptionalTextValue { get; set; } = string.Empty;

    private async void HandleClick()
    {
        await TestMessageBox.Show();
    }

    private void PerformCreation(MouseEventArgs obj)
    {
        Console.WriteLine("Performing creation.");
    }
}

Solution

  • You can use the IsValid attribute and bind it.

    <MudForm @ref="form" @bind-IsValid="@success">
    
    Disabled="@(!success)"
    
    bool success;
    

    Here's a snippet: MudSnippet

    <MudForm @ref="form" @bind-IsValid="@success">
        <MudTextField Immediate="true" T="string" Label="Username" @bind-Value="username" Required="true" RequiredError="User name is required!" />
        <MudTextField Immediate="true" T="string" Label="Email" @bind-Value="email" Required="true" RequiredError="Email is required!" Validation="@(new EmailAddressAttribute() {ErrorMessage = "The email address is invalid"})"/>
    </MudForm>   
    <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!success)" DisableElevation="true" OnClick="@(async () => await SubmitAsync())">Submit</MudButton>
    
    @code {
        [Inject] ISnackbar Snackbar { get; set; }
        bool success;
        string username;
        string email;
        MudForm form;
    
        private async Task SubmitAsync()
        {
            await form.Validate();
            if(form.IsValid)
            {
                Snackbar.Add("Submit");
            }
        }
    }