如何通过编程方式提交 Blazor 表单？

Question

拥有一个Blazor EditForm 和一个包含的 InputTextArea（即多行文本框），我希望在用户按下Ctrl+Enter时，能够验证并提交表单，就像点击提交按钮一样。

我已经成功地连接了键盘处理程序，如下所示：

<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>

使用以下代码：

private EditForm _editForm;

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

非常遗憾，在EditForm类中我没有找到任何可供调用的方法，可以像用户单击提交按钮那样提交和验证表单。

我查看了这个和这个问题，但都没有成功。

我的问题

如何以编程方式提交并验证Blazor表单？

- Uwe Keim

---

但是假设用户只是在输入后按了回车键。这也会提交表单...实际上，如果输入控件具有焦点，并且您按下回车键，则表单始终会提交。请考虑这一点，并重新表达您的问题... - enet

@enet 因为它是一个多行控件TextArea，按下“Enter”键只会将键盘插入符放到下一行。 - Uwe Keim

是的，你说得对。我没有注意到这一点。 - enet

Answer 1

<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
        }
    }
}
}

- Peter Morris

---

非常感谢，Peter。这几乎解决了问题。不幸的是，InputTextArea 上有一个验证，它必须是非空的。当该字段具有输入焦点并且键盘处理程序触发时，文本区域和绑定模型字段之间的交换尚未执行。我必须先来回更改输入焦点。我甚至尝试调用NotifyFieldChanged也没有成功。是否有任何提示可以在没有焦点更改的情况下填充模型值？ - Uwe Keim

好的，我通过派生自己的InputTextArea（例如这里）并添加一个oninput处理程序来解决了它，在onchange处理程序之外。实际上，我从原始源代码中复制了代码并添加了oninput处理程序。有了这个，改变不仅在失去焦点时触发，而且立即触发。 - Uwe Keim

@UweKeim 请尝试在您的 InputText 中添加 @bind-Value:event="oninput"。不确定它是否有效，但可能会有帮助。 - Peter Morris

谢谢，@PeterMorris。你在这里的帮助以及你网站上的大量教程和示例，在很多情况下都对我有很大的帮助。非常感谢你的努力！ - Uwe Keim

@UweKeim，那它在 <InputText> 上工作了吗？我认为应该可以，但我从未尝试过。 - Peter Morris