当有效性发生变化时，如何动态启用/禁用 Mudblazor 表单上的按钮？

Question

如果 MudForm 中的字段验证失败，我想禁用执行操作的按钮。例如如果用户跳出此示例表单上的必填文本字段并将该字段留空，则“创建”按钮将被禁用。我尝试了几种不同的方法，但到目前为止还没有运气。我最近尝试过的事情是根据表单的

Disabled

字段设置按钮的

IsValid

字段，认为它可能会通过绑定自动处理，但它不会执行任何操作。

这是剃须刀文件：

<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>

这是代码：

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.");
    }
}

Answer 1

您可以使用

IsValid

属性并绑定它。

<MudForm @ref="form" @bind-IsValid="@success">

Disabled="@(!success)"

bool success;

这是一个片段：MudSnippet

@using System.Text.RegularExpressions
@using System.ComponentModel.DataAnnotations


<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");
        }
    }
}