按回车键调用click方法中的代码

Question

我有两个输入框和按钮。当我在应该执行某些代码的两个输入字段之一中按 Enter 但发生了什么按钮代码被执行

<div class="input-group">
        <button mat-raised-button color="primary" 
     (click)="getCurrency()"
          style="margin-right: 10px;width: 20px">...</button>
        <div class="input-group-prepend">
          <input id="currencyDesc"  type="text" size="15" [(ngModel)]='name' [ngModelOptions]="{standalone: true}">
        </div>
        <div class="input-group-prepend">
          <input formControlName="CRCYIsn" type="text" size="4" (keyup.enter)="currencyByIsn()">
        </div>

        <label> : العملة</label>
      </div>

Answer 1

在该按钮上按以下方式尝试 (keydown.enter)="$event.preventDefault()"：

<button mat-raised-button color="primary" 
       type="button"
       (keydown.enter)="$event.preventDefault()" 
       (click)="getCurrency()"
        style="margin-right: 10px;width: 20px">...</button>

如果是表单，请尝试将此代码放在 <form> 标签本身上

Answer 2

对于ENTER键，为什么不用(keyup.enter)

  <div class="input-group">
            <button mat-raised-button color="primary" 
         (click)="getCurrency()"
              style="margin-right: 10px;width: 20px">...</button>
            <div class="input-group-prepend">
              <input id="currencyDesc" (keyup.enter)="doSomething()" type="text" size="15" [(ngModel)]='name' [ngModelOptions]="{standalone: true}">
            </div>
            <div class="input-group-prepend">
              <input formControlName="CRCYIsn" (keyup.enter)="doSomething()" type="text" size="4" (keyup.enter)="currencyByIsn()">
            </div>

            <label> : العملة</label>
          </div>

Answer 3

我会改变接下来的事情：

首先，如果 div 在表单中，您应该只使用 formcontrolname。它比使用 ngForm 更好。
其次，我认为最好使用(click)而不是(keyup.enter)，或者直接使用(ng-submit)，如果在提交表单时执行此方法。
最后，不要将 html 代码与 css 混合，使用 css 文件作为 Angular 最好的组件之一

Answer 4

表单内的按钮默认为 submit 类型。告诉按钮是 button 类型并且它不应该被触发：

<button mat-raised-button type="button" color="primary" (click)="getCurrency()">

DEMO

也如前所述，不要将反应形式与 ngModel 混合使用。

按回车键调用click方法中的代码

pressing enter calls the code in click method

angular

click

keyup