Bind Value Event Oninput

Posted on  by admin
Platform: Blazor|Category : Components, Event handling.

We can specify what event the bind attribute shoulduse to handle updating the value.

But, in components, we need to define theevent in the child component, for example, the oninput event on thechild component, which triggers a method to update the value and invokes the ValueChanged EventCallback.

The parent component has also been updated to use bind-Valuewhen passing its Value parameter to the child component.

In the sample, we’re able to type in the text box on the parent component, both the values will be updated on every input change since we have bound the oninput event.

Modified6 months ago. 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:. 4545 bronze badges. 80011 gold badge88 silver badges2222 bronze badges. 88 silver badges2222 bronze badges. If you need this for validation, see the answer for this:. 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.
dozieogbodozieogbo
323
1

where MyInputTextCode is the class name of your implementation of InputBase. 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-2020I 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.

  1. 22 gold badges1313 silver badges2424 bronze badges. 2424 bronze badges. It works on a simple input because you are binding to the html attribute "value". InputText is a C# class.

The property name you need to bind to is Value with a capital V. Change all @bind-value occurrences to @bind-Value and it should work.

  1. 88 gold badges6969 silver badges123123 bronze badges. 123123 bronze badges. As a workaround, I found that changing from Blazor components such as InputTextArea to plain HTML textarea tag and leveraging the binding on them can fix the problem:.
MajorMajor
4,5851

The function essentially starts timer that is meant to save data after X amount of time passed.

My issue here is that with this code, the input boxes behave not like oninput, but more of onchange.

agua from marsagua from mars
14.8k10

Not the answer you're looking for? Browse other questions tagged asp.net-coreblazorblazor-server-side or ask your own question.