Html Angular 5 Button 在 Enter 键按下时提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50129245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 Button Submit On Enter Key Press
提问by murday1983
I have an Angular 5 form application using all the usual models but on the forms I want the form to submit without having to physically click on the 'Submit' button.
我有一个使用所有常用模型的 Angular 5 表单应用程序，但在表单上我希望表单提交而不必实际单击“提交”按钮。
I know it's normally as easy as adding type=submitto my button element but it does not seem to be working at all.
我知道这通常就像添加type=submit到我的按钮元素一样简单，但它似乎根本不起作用。
I don't really want to call an onclickfunction just to get it working. Can anyone suggest anything that I may be missing.
我真的不想为了onclick让它工作而调用一个函数。任何人都可以建议我可能遗漏的任何内容。
<form (submit)="search(ref, id, forename, surname, postcode)" action="#">
<mat-card>
<mat-card-title class="firstCard">Investor/Adviser search</mat-card-title>
<mat-card-content>
<p *ngIf="this.noCriteria" class="errorMessage">Please enter search criteria.</p>
<p *ngIf="this.notFound" class="errorMessage">No investor's or adviser's found.</p>
<mat-form-field>
<input matInput id="invReference" placeholder="Investor/Adviser reference (e.g. SCC/AJBS)" #ref>
</mat-form-field>
<mat-form-field>
<input matInput id="invId" placeholder="Investor/Adviser ID" type="number" #id>
</mat-form-field>
<mat-form-field>
<input matInput id="invForname" placeholder="Forename" #forename>
</mat-form-field>
<mat-form-field>
<input matInput id="invSurname" placeholder="Surname" #surname>
</mat-form-field>
<mat-form-field>
<input matInput id="invPostcode" placeholder="Postcode" #postcode>
</mat-form-field>
</mat-card-content>
<mat-card-footer>
<button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search.">Search</button>
</mat-card-footer>
</mat-card>
</form>
采纳答案by Tobias Fuchs
You could also use a dummy form arround it like:
你也可以在它周围使用一个虚拟表格，比如：
<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>
the search function has to return falseto make sure that the action doesn't get executed.
Just make sure the form is focused (should be when you have the input in the form) when you press enter.
搜索功能必须return false确保操作不会被执行。
当您按下 Enter 键时，只需确保表单处于焦点（应该是当您在表单中输入时）。
回答by shanhaichik
try use keyup.enteror keydown.enter
尝试使用keyup.enter或keydown.enter
<button type="submit" (keyup.enter)="search(...)">Search</button>
回答by chris_r
In case anyone is wondering what input value
如果有人想知道什么输入值
<input (keydown.enter)="search($event.target.value)" />
回答by andyfinch
In addition to other answers which helped me, you can also add to surrounding div. In my case this was for sign on with user Name/Password fields.
除了对我有帮助的其他答案之外，您还可以添加到周围的 div。在我的情况下，这是使用用户名/密码字段登录。
<div (keyup.enter)="login()" class="container-fluid">
