Angular 5 Button 在 Enter 键按下时提交 [英] Angular 5 Button Submit On Enter Key Press

问题描述

我有一个使用所有常用模型的 Angular 5 表单应用程序，但在表单上我希望表单提交而无需实际单击提交"按钮.

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.

我知道这通常就像将 type=submit 添加到我的按钮元素一样简单，但它似乎根本不起作用.

I know it's normally as easy as adding type=submit to my button element but it does not seem to be working at all.

我真的不想为了让它工作而调用 onclick 函数.任何人都可以提出我可能遗漏的任何内容.

I don't really want to call an onclick function just to get it working. Can anyone suggest anything that I may be missing.

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

推荐答案

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

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>

搜索功能必须return false 以确保操作不会被执行.
只需确保在按 Enter 键时表单处于焦点(应该是在表单中有输入时).

the search function has to return false to 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.

这篇关于Angular 5 Button 在 Enter 键按下时提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！