如何在MudBlazor表单有效性变化时动态启用/禁用按钮

问题场景 #

当MudForm中的字段验证失败时（比如必填文本字段留空），需要自动禁用「Create」按钮，但直接通过TestForm.IsValid == false绑定按钮的Disabled属性没有效果。

解决步骤 #

• 开启实时验证：给MudForm添加ValidateOnInput="true"属性，让表单在字段输入变化时自动执行验证，实时更新IsValid状态。
• 正确绑定禁用状态：按钮的Disabled属性绑定到!TestForm.IsValid，确保表单状态变化时组件能触发重新渲染。
• 初始化验证状态（可选）：在弹窗显示后手动触发一次验证，确保初始状态下按钮的禁用状态正确。

修改后的代码 #

Razor 文件 #

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

<MudMessageBox @ref="TestMessageBox" Title="Validation Test" CancelText="Cancel">
    <MessageContent>
        <MudForm @ref="TestForm" ValidateOnInput="true">
            <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)">Create</MudButton>
    </YesButton>
</MudMessageBox>

C# 代码 #

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 Task HandleClick()
    {
        await TestMessageBox.Show();
        // 弹窗显示后手动触发一次验证，确保初始状态正确
        await TestForm.ValidateAsync();
        StateHasChanged();
    }

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

关键说明 #

• ValidateOnInput="true"是核心：没有这个属性，MudForm只会在提交时验证，不会实时更新IsValid，导致按钮状态无法同步。
• 弹窗显示后调用TestForm.ValidateAsync()：确保初始状态下（比如必填字段为空）按钮会立即禁用。
• StateHasChanged()：手动通知组件状态变更，保证UI能及时更新。

内容的提问来源于stack exchange，提问作者SSteve