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>

原文由 murday1983 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 634
2 个回答

您还可以使用虚拟形式围绕它:

 <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 以确保该操作不会被执行。

当您按下回车键时,只需确保表单是焦点(应该是当您在表单中输入时)。

原文由 Tobias Fuchs 发布,翻译遵循 CC BY-SA 4.0 许可协议

尝试使用 keyup.enterkeydown.enter

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

原文由 shanhaichik 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题