Blazor bind-value:event oninput

Question

I am trying to trigger the model validation in Blazor by using EditForm.

For some reason, the oninput event doesn't seem to be called if using the InputText, but it works using a simple input element.

Have I missed something?

Here is an HTML sample:

<EditForm Model="@Model" OnValidSubmit="@OnValidSubmit" id="authorize">
    <h1 class="mb-3">
       <span class="d-block">Authorize</span>
    </h1>
    <DataAnnotationsValidator />
    <div class="form-group">
        <label class="sr-only" for="AuthorizeUsername">Username</label>
        <div class="input-group mb-2">
            <div class="input-group-prepend">
                <div class="input-group-text"><i class="fas fa-user"></i></div>
            </div>
            <InputText type="text" class="form-control" id="AuthorizeUsername" placeholder="Username" @bind-value="@Model.Username" @bind-value:event="oninput" />
        </div>
    </div>
    <div class="form-group">
        <label class="sr-only" for="AuthorizePassword">Password</label>
        <div class="input-group mb-2">
            <div class="input-group-prepend">
                <div class="input-group-text"><i class="fas fa-asterisk"></i></div>
            </div>
            <InputText type="password" class="form-control" id="AuthorizePassword" placeholder="Password" @bind-value="@Model.Password" @bind-value:event="oninput" />
        </div>
    </div>
    <div class="form-group">
        <ValidationSummary />
        <button type="submit" class="btn btn-outline-primary"><i class="fas fa-sign-in-alt mr-1"></i> Login</button>
    </div>
</EditForm>

I found this issue which has some different ways and workarounds for the bind-value:event format you're using. Try using bind-value-oninput="@Model.Password" — A Friend
Studio wont accept this anymore as syntax has changed, perhaps its a bug and should be posted on github ? — NullReference
It looks like it should work.. Any examples I can find look exactly the same as what you have besides the InputText. So yes it may be worth creating an issue for it — A Friend
I came across the same problem and I found that using the input element instead of the InputText element worked for me. — Harry Biscuit
Use a capital V in @bind-Value because Value is the name of a property on the C# class InputText — Peter Morris

Jakotheshadows Jakotheshadows · Accepted Answer · 2019-08-01T19:00:06

If you need this for validation, see the answer for this:

How to make an EditForm Input that binds using oninput rather than onchange

Original Answer

TLDR: Blazor Input components do not support this out of the box. You need to roll your own by extending InputBase, and your Razor markup for your new component will put the input event binding directly on the input element.

It would be nice if this came as an out-of-the-box option, but at least there is a way to do it that isn't terrible. Be aware though that this quickly gets more complicated for more complicated input types. If you want your own InputBase<DateTime> derived class, for example, you need to be prepared to correctly handle DateTime formatting in the binding events.

The markup for your own version of InputText, lets call it MyInputTextCode that extends InputBase<string> would look something exactly like this:

@inherits MyInputTextCode;

<input type="text" id="@Id" class="@Class" @bind-value="CurrentValueAsString" @bind-value:event="oninput" />

where MyInputTextCode is the class name of your implementation of InputBase<string>

The usage would essentially be the same as InputText, but you would instead use the file name (witout the extension) of your .razor markup instead of InputText.

UPDATE 4-30-2020 I no longer recommend deriving from InputBase in your code-behind, instead you can simply @inherits an existing form component class such as InputText and override the markup in your .razor file. If this isn't clear please comment on this answer and I'll elaborate further in this update.

Blazor bind-value:event oninput

2 Answers