web-dev-qa-db-ja.com

Angular 5ボタン送信時にEnterキーを押す

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>
htmlangularangular5
8
murday1983

次のようにダミーフォームを使用することもできます。

<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キーを押したときにフォームがフォーカスされていることを確認してください（フォームに入力がある場合）。

12
Tobias Fuchs

keyup.enterまたはkeydown.enterを使用してみてください

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

誰がどの入力値を疑問に思っている場合

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