角5按钮提交输入按键

小开

尝试使用 键盘输入或 Keydown 输入

  <button type="submit" (keyup.enter)="search(...)">Search</button>

小开

最佳答案

你也可以在它周围使用一个虚拟的表单，比如:

<mat-card-footer>
<form (submit)="search(ref, id, forename, surname, postcode)" action="#">
<button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search." >Search</button>
</form>
</mat-card-footer>

搜索函数必须使用 return false来确保操作不会被执行。
当您按回车键时，只需确保表单是集中的(当您在表单中有输入时应该是集中的)。

小开

如果有人想知道输入值是多少

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

小开

除了其他帮助我的答案之外，您还可以添加到周围的 div。在我的例子中，这是用于使用用户名/密码字段进行登录。

<div (keyup.enter)="login()" class="container-fluid">

小开

尝试使用 keyup.enter，但要确保在 input标签中使用它

<input
matInput
placeholder="enter key word"
[(ngModel)]="keyword"
(keyup.enter)="addToKeywords()"
/>

小开

另一种方法是在 Form 的标记中执行 Keydown 或 KeyUp

<form name="nameForm" [formGroup]="groupForm" (keydown.enter)="executeFunction()" >

小开

仅有 type="submit"属性是不够的。

这次活动的重点是强调以老式的方式提交表单。

我的意思是，它必须在表单标签 (submit)和一个按钮，是包含在同一个表单，这个按钮必须具有 type="submit"属性。

第一行和第七行中的 onSubmit函数为您捕获 enter键事件和正常的 mouse click事件。

但是，如果同时使用两种方法，则发送两次 http 请求。我不知道这是否是一个错误，但只有您链接到表单提交的函数是足够的。

我们中的许多人在使用角度显影时没有遵循这个规则。它允许我们制作一个基本的可访问性和用户友好的表单。

<form [formGroup]="form" (submit)="onSubmit()">


<mat-form-field>
<mat-label>Title</mat-label>
<input matInput formControlName="title">
</mat-form-field>


<button type="submit" mat-raised-button (click)="onSubmit()">
SUBMIT
</button>


</form>

小开

我得说，这里有个小小的警告。如果您想提交表单，除非您单击表单上的任何地方或特定的输入字段，否则上述方法都不起作用。

如果你想提交表单，只需点击回车键，不需要点击任何地方，你需要在 html 中全局声明它:

<button (window:keypress)="onSomeAction($event)">

以及 TS 档案:

onSomeAction(event){
if(event.keyCode===13){
//submit form
}
}

或者

<button (window:keypress.enter)="onSomeAction($event)">

小开

只需将 ngSubmit 与提交按钮结合使用。

<form (ngSubmit)="onSave()" [formGroup]="userForm">
<!-- ...form inputs -->
<button class="btn btn-primary type="submit" [disabled]="!userForm.valid">
Save
</button>
</form>