Blazor EditForm启动时禁用提交按钮

Question

我在Blazor应用程序中使用EditForm提交来自空白表单的信息，以及使用从数据库获取的数据初始化的表单。当我用数据库中的数据初始化表单时，我希望在发生某些输入之前禁用Submit按钮。如果没有输入，按钮应该保持禁用状态，因为没有新信息要保存。

所以我需要某种类型的输入检测器，我可以触发Submit按钮禁用标志。实现这一目标的正确方法是什么?所以我需要这样写:

<EditForm Model="MyModel">
<InputText type="text" @bind-value="x" @oninput="OnInput"/>
</EditForm>
private void Oninput(){
IsDisabled = false;
}

在各种输入(文本输入，单选，复选框等)中实现这一点的正确方法是什么

Answer 1

因此，在经历了各种选项之后，解决方案似乎如下。我想开始与提交/保存按钮禁用，并打开它只有当有一个输入。实现这一点的一种方法是使用EditContext OnFieldChanged事件。这样的:

protected async override Task OnInitializedAsync()
{
editContext = new EditContext(allRisksItem);
editContext.OnFieldChanged += EditContext_OnFieldChanged;
....
}
private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
{
disable_button = false;
}

OnFieldChanged事件在EditCotext检测到表单中的字段更改时被触发。我想我也遇到过输入事件触发，但还没有尝试过。因此，有了这个解决方案，不需要在每个字段中都有一个@oninput来检测输入等。

希望这能帮助那些正在寻找这个问题解决方案的人。也感谢那些给我其他建议的人。

Answer 2

您可以在表单

上使用is modified标志

<EditForm Model="_model" Context="_Context">
<InputRadioGroup @bind-Value="@_model.SelectedManufacturer">Manufacturer:<br>
@foreach (var manufacturer in Manufacturers)
{
<InputRadio Value="manufacturer" />@manufacturer<br>
}
</InputRadioGroup> 
<button type="submit" disabled="@(!_Context.IsModified())">Submit</button>
</EditForm>

@code {

EditContext _Context { get; set; }

*//code below just to make the form work*
List<String> Manufacturers = new List<string> { "Ford", "Toyota", "Tesla" };
FormClass _model = new FormClass();
class FormClass
{
public String SelectedManufacturer { get; set; }
}

}

Answer 3

(预先注意:您并不真的需要在EditForm控件中包装所有内容，或者使用控件的Blazor版本，除非您打算使用所有验证功能，在显示模型上使用带注释的数据等等)您也可以使用普通的html控件。

我有三种方法(不保证这是Blazor的最佳实践)

(1)将控件放入if块中。

if (!IsDisabled)
{
// My input stuff here
}

"按钮在哪?我想我最好先做一个选择!">

(2)即使它抱怨错误的标记，您可以将Disabled设置为布尔值

<someinput disabled="@IsDisabled">

编译器可能会坚持认为disabled不接受布尔值，但显然Blazor是支持你的，因为它呈现得很好。

(3)不要禁用控件，而是将其作为向用户提供信息的机会。有一个红色的标签，并将其文本设置为"Cannot submit form until (something).&">

---

当我想要动态使用文本时，我通常做的一件事是添加一个keyup事件处理程序来捕获Enter键。当某人刚刚输入了自己名字的第一个字母时，启用控件没有多大意义。(虽然老实说，Blazor是如此响应，我通常跳过按钮，只是继续并开始处理文本):

<InputText type="text" @bind-value="x" @oninput="OnInput" @onkeyup="CheckText"/>
void CheckText(KeyboardEventArgs e) 
{
if (e.Code == "Enter")
{
// IsDisabled = false;
// StateHasChanged();
DoMyTextStuff (x); 
}
}