Angular 5 按钮在按下回车键时提交

16 浏览
0 Comments

Angular 5 按钮在按下回车键时提交

我有一个使用Angular 5表单应用程序，使用了所有常用的模型，但是在表单上，我希望在不必点击“提交”按钮的情况下提交表单。

我知道通常只需将type=submit添加到我的按钮元素中就可以了，但似乎一点都不起作用。

我真的不想调用一个onclick函数来使其工作。有人可以提出我可能遗漏的任何建议吗？


  
    投资者/顾问搜索
    
      
请输入搜索条件。
      
未找到投资者或顾问。

0

3 答案

0 Comments

问题出现的原因是用户希望在按下回车键时能够提交表单。然而，默认情况下，按下回车键只会触发文本框的换行行为，而不会触发按钮的点击事件。

解决方法是使用Angular提供的keyup.enter或keydown.enter事件来监听按下回车键的动作。通过在按钮上添加相应的事件监听器，当用户按下回车键时，可以触发提交表单的操作。

下面是使用keyup.enter的示例代码：

如果你不是在使用表单，可以参考stackoverflow上的解决方法（链接：https://stackoverflow.com/a/71092233/1461862）。这个解决方法适用于对话框等场景。

至此，我们已经了解了Angular 5中如何在按下回车键时提交表单的问题以及对应的解决方法。希望对你有帮助！

0
0 Comments

问题出现的原因是点击Enter键时，按钮没有触发提交操作。解决方法是将按钮放在一个表单中，并在按下Enter键时聚焦到表单上。

解决方法如下：

需要注意的是，为了确保不执行表单的默认操作，search函数必须返回false。

search(ref, id, forename, surname, postcode) {
  // 执行搜索操作
  return false;
}

确保在按下Enter键时，表单获得焦点（当输入在表单中时应该有焦点）。如果按照上述方法仍然无法解决问题，请确认在组件中是否添加了完整的HTML代码，因为你建议的修复方法在点击"Enter"时没有提交表单。

0
0 Comments

Angular 5 Button Submit On Enter Key Press

问题的出现原因：

在Angular 5中，当用户在输入框中按下回车键时，通常情况下并不会触发表单的提交事件。这可能会导致用户在按下回车键后无法立即提交表单，而需要手动点击提交按钮。

解决方法：

为了解决这个问题，我们可以使用一个简单的技巧，即在输入框元素上添加一个键盘按下事件，当用户按下回车键时，触发提交按钮的点击事件。

首先，在HTML模板中，我们需要为输入框元素添加一个键盘按下事件：

<input (keydown.enter)="search($event.target.value)" />

在该事件中，我们调用一个函数，并将输入框的值作为参数传递给该函数。在该函数中，我们可以执行任何我们想要的操作，比如提交表单或执行其他相关操作。

接下来，我们需要在提交按钮上添加一个点击事件，以便在用户按下回车键时触发该事件：

<button (click)="submit()">Submit</button>

在该点击事件中，我们可以执行提交表单的操作或其他相关操作。

通过以上步骤，我们成功地实现了在用户按下回车键时自动触发提交按钮的点击事件，从而实现了Angular 5中按下回车键提交表单的功能。

0