为什么 MudBlazor 表单验证要求我在表单无效然后又有效时单击“保存”两次？

Question

概念证明请参见 https://try.mudblazor.com/snippet/wYwyulRbnpqkbfVJ

在此示例中，单击“保存”而不触摸“保存”按钮上方的任何字段 - 将显示验证错误。然后，从下拉列表中选择一个值并在文本字段中输入一些文本，然后再次单击“保存”按钮 - 验证错误消失，但不会调用 SaveCondition 方法。再次单击“保存”按钮，将调用 SaveCondition 方法。

在任何其他情况下，总是会调用 SaveCondition 方法。仅当单击“保存”按钮之前存在验证错误时，才不会调用它。

我该如何解决这个问题？

Answer 1

导致这种情况的行为实际上是因为

MudTextField

与其

Value

的绑定方式，即

Condition

。

当您在条件文本字段中添加文本，然后单击“保存”按钮后，您的保存点击将被

MudTextField

的

Value

更新覆盖，默认情况下，当按下 Enter 或失去焦点时会发生这种情况 (这就是您立即单击“保存”后发生的情况）。

您可以通过将

MudTextField

的

Immediate

属性设置为 true 来解决此问题，每当用户键入时，这都会更改其值。

<MudForm @ref="_addForm" @bind-IsValid="@_addFormIsValid">
    <MudSelect Dense="true" T="int" Label="Condition Type" For="@(() => ConditionType)" @bind-Value="ConditionType">
        <MudSelectItem Value="0" Disabled="true">Select Condition Type</MudSelectItem>
        <MudSelectItem Value="1">From</MudSelectItem>
        <MudSelectItem Value="2">Subject</MudSelectItem>        
    </MudSelect>

    <MudTextField T="string" Immediate="true" @bind-Value="Condition" Label="Condition" Required="true" RequiredError="You must enter a condition" />
</MudForm>

MudBlazor 片段