html - Angular 5按钮在输入键按下时提交
问题描述
我有一个使用所有常用模型的 Angular 5 表单应用程序,但在表单上我希望表单提交而无需实际单击“提交”按钮。
我知道这通常就像添加type=submit
到我的按钮元素一样简单,但它似乎根本不起作用。
我真的不想为了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>
解决方案
尝试使用keyup.enter或keydown.enter
<button type="submit" (keyup.enter)="search(...)">Search</button>
推荐阅读
- android - 执行 org.jetbrains.kotlin.gradle.internal.KaptWithoutKotlincTask$KaptExecutionWorkAction?java.lang.reflect.Invocation? 时发生故障?
- r - R尝试读取一个csv,如果它不存在,则读取另一个
- google-apps-script - 复制谷歌表格中的每一行,重复数据集中的第一列为空
- java - StreamingOutput 没有立即产生输出
- html - 为什么 CSS id 在 dv 中不起作用?我犯了某种错误吗?
- java - 用户@Value springboot 注解作为枚举值
- python - 如何使用 Python 将文件上传到 file.io 网站
- laravel-8 - 如何清理 laravel 中失败的排队通知的 failed_jobs?
- javascript - node js调用selenium函数并强制客户端在服务器上打开浏览器
- node.js - 由于 Craco,Dockerized CRA 无法运行?