Angular 5按钮提交输入按键

Question

我有一个使用所有常用模型的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>

Answer 1

尝试使用keyup.enter或keydown.enter

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

Answer 2

如果有人想知道什么输入值

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

Answer 3

除了对我有帮助的其他答案之外，您还可以添加到周围的 div。在我的情况下，这是使用用户名/密码字段登录。

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

Answer 4

您还可以使用伪表单围绕它，例如：

<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时，确保表单集中显示（应该在表单中输入内容时）

Answer 5

尝试使用keyup.enter但请确保在您的input标签内使用它

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

Answer 6

另一种选择是在 Form 的标签中执行 Keydown 或 KeyUp

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