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混合使用，对于Angular最好的质量之一的组件使用css文件

Answer 4

默认情况下，表单内的按钮的类型为submit。告诉按钮类型为button，并且不应触发该按钮：

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

DEMO

也如上所述，请勿将反应式与ngModel混合使用。

按下Enter会调用click方法中的代码

4 个答案: