How to programmatically submit a Blazor form?

Question

Having a Blazor EditForm and a contained InputTextArea (i.e. a multiline text box), I do want to validate and submit the form, when the user presses Ctrl+Enter, just as if he would click the submit button.

I've successfully got the keyboard handler connected like this:

<EditForm Model="@myModel" Format="g" OnValidSubmit="@Store" @ref="_editForm">
    <InputTextArea 
        onkeypress="@(async e => await myKeyPress(e))"
        @bind-Value="myModel.Foo" />
    <button type="submit">Store it</button>
</EditForm>

With this code behind:

private EditForm _editForm;

private async Task myKeyPress(KeyboardEventArgs key)
{
    if (key.CtrlKey && key.Code == @"Enter")
    {
        _editForm.??? // What to call here?
    }
}

Unfortunately, I see no method in the EditForm class that I could call to submit and validate the form, as if the user would click the submit button.

I've looked at this and this SO question with no success.

My question

How to programmatically submit and validate a Blazor form?

But suppose that the user has only pressed Enter after typing. This will also submit the form... Actually, the form always submits if an input control has the focus, and you hit enter. Think about that, and reformulate your question... — enet
– enet, Commented Jun 13, 2020 at 14:05
@enet Since it is an InputTextArea which ist a multiline control, pressing the Enter key simply puts the keyboard caret into the next line. — Uwe Keim
– Uwe Keim, Commented Jun 13, 2020 at 15:02

Peter Morris · Accepted Answer · 2020-06-13 21:25:59Z

7

<EditForm Context=MyCurrentEditContext>
  <InputTextArea 
        onkeypress="@(async e => await myKeyPress(MyCurrentEditContext, e))"
        @bind-Value="myModel.Foo" />
    <button type="submit">Store it</button>
</EditForm>

@code
{
private async Task myKeyPress(EditContext editContext, KeyboardEventArgs key)
{
    if (key.CtrlKey && key.Code == @"Enter")
    {
        if (editContext.Validate())
        {
          ... Do stuff if valid
        }
    }
}
}

answered Jun 13, 2020 at 21:25

Peter Morris

23.5k12 gold badges97 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Uwe Keim Over a year ago

Thanks a lot, Peter. This nearly did the trick. Unfortunately, the InputTextArea has a validation on it that it must be non-empty. When this field has the input focus and the keyboard handler fires, the exchange between the textarea and the bound model field is not yet performed. I have to change the input focus forth and back first. I even tried callingNotifyFieldChanged without success. Any hint on whether/how to fill the model value even without a focus change?

Uwe Keim Over a year ago

OK, I solved it by deriving my own InputTextArea (like e.g. here) and adding an oninput handler, in addition to the onchange handler. In fact, I copied the code from the original source and added the oninput handler. With this, the change is triggered not only when the focus is lost, but immediately.

Peter Morris Over a year ago

@UweKeim Try adding @bind-Value:event="oninput" to your InputText. Not certain it will work, but it might.

Uwe Keim Over a year ago

Thanks, @PeterMorris Your help here and your tons of tutorials and examples on your website helped and help me in an awesome lot of cases. Thank you very much for your efforts!

Peter Morris Over a year ago

@UweKeim Did it work on <InputText> then? I thought it should, but I've never tried.

|

Collectives™ on Stack Overflow

How to programmatically submit a Blazor form?

My question

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My question

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related