如何在提交表单之前检测Blazor服务器EditForm中的更改

Question

本质上，我要做的是禁用EditForm中的"更新"按钮，直到用户对文本框中包含的文本进行更改。

<EditForm EditContext="@EditContext">
<InputText @bind-Value="SomeModel.Text></InputText>
...
<EditForm/>

我已经设置了如下的事件处理程序

private EditContext EditContext { get; set; }
protected override void OnInitialized()
{
this.EditContext = new EditContext(this.SomeModel);
EditContext.OnFieldChanged += FieldChanged;
}

这是有效的，但不是以我希望的方式。有了这一点，我必须等到用户更改焦点后才能触发事件，但我希望它在文本更改后立即触发(相当于WinForms TextBox.OnTextChanged(

Answer 1

第三方库通常在其文本框控件中实现这一点，但由于您使用的是现有的Blazor InputText控件，Microsoft通过制作自己的自定义Text控件与InputText共享了一种使用oninput的方法，如图所示。

使用InputText组件创建一个自定义组件，该组件使用oninput事件(input(而不是onchange事件(change(。输入事件的使用触发每次按键的字段验证

Answer 2

作为参考，您可以非常容易地创建自己版本的Input控件。这是一个文本版本，您可以在其中设置更新事件：

public class BlazrInputText : InputText, IComponentReference
{
[Parameter] public bool BindOnInput { get; set; } = true;
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
builder.OpenElement(0, "input");
builder.AddMultipleAttributes(1, AdditionalAttributes);
if (!string.IsNullOrWhiteSpace(this.CssClass))
builder.AddAttribute(2, "class", CssClass);
builder.AddAttribute(3, "value", BindConverter.FormatValue(CurrentValueAsString));
if (BindOnInput)
builder.AddAttribute(4, "oninput", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
else
builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
builder.AddElementReferenceCapture(6, __inputReference => Element = __inputReference);
builder.CloseElement();
}
}