Angular 5按钮提交输入按键

时间:2018-05-02 07:30:02

标签: html angular angular5

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

8 个答案:

答案 0 :(得分:19)

尝试使用 keyup.enter keydown.enter

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

答案 1 :(得分: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以确保aciton不会被执行 当你按下

时,只需确保表格是聚焦的(当你在表格中有输入时)

答案 2 :(得分:4)

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

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

答案 3 :(得分:2)

万一有人想知道什么输入值

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

答案 4 :(得分:1)

type="submit" 属性是不够的。

这次活动的重点是强调以老式的方式提交表单。

我的意思是,它必须在表单标记 (submit) 中,并且同一表单中包含一个按钮,并且该按钮必须具有 type="submit" 属性。

第一行和第七行的 onSubmit 函数为您捕获 enter 键事件和正常的 mouse click 事件。

但是,当您同时使用两者时,http 请求会发送两次。不知道是不是bug,只有你链接到表单提交的功能就够了。

我们中的许多人在使用 Angular 进行开发时并不遵循这条规则。它使我们能够制作基本的辅助功能和用户友好的表单。

<form [formGroup]="form" (submit)="onSubmit()">

    <mat-form-field>
        <mat-label>Title</mat-label>
        <input matInput formControlName="title">
    </mat-form-field>

    <button type="submit" mat-raised-button (click)="onSubmit()">
        SUBMIT
    </button>

</form>

答案 5 :(得分:0)

除了可以帮助我的其他答案之外,您还可以添加周围的div。就我而言,这是用于使用“用户名/密码”字段登录。

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

答案 6 :(得分:0)

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

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

答案 7 :(得分:0)

好吧,我想说的是,这里有一个小小的警告。如果您想提交表单,则上述方法均无效,除非您点击表单上的任意位置或专门点击输入字段。

好吧,如果你想通过回车而不点击任何地方来提交表单,你需要在 html 中全局声明它:

<button (window:keypress)="onSomeAction($event)">

并在 TS 文件中:

onSomeAction(event){
 if(event.keyCode===13){
   //submit form
 }
}

<button (window:keypress.enter)="onSomeAction($event)">