在提交表单之前，如何检测 Blazor Server EditForm 中的更改

Question

Essentially, what I'm trying to do, is have the 'Update' button within an EditForm appear disabled, until the user has made a change to the text contained within a textbox.

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

I've set up the event handler as follows

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

This works, but not in the way I want it to. With this I have to wait until the user changes focus before the event fires, but I want it to fire as soon as the text changes (The equivalent of WinForms TextBox.OnTextChanged)

Answer 1

For reference, you can create your own versions of the Input controls very easily. Here's a version of the text version where you can set the update event:

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

Answer 2

3rd party libraries usually have this implemented in their textbox controls but since you're using the existing Blazor InputText control, Microsoft shared a way to use oninput with InputText by making your own custom Text control as shown here .

Use the InputText component to create a custom component that uses the oninput event (input) instead of the onchange event (change). Use of the input event triggers field validation on each keystroke