如何在 Angular 9 中按 Enter 键来触发按钮

Question

是否可以通过按键盘上的 Enter 来触发我的“添加”按钮？

////

这是表单中的最后一个 div，用于第三个间隙：

  <div fd-form-item *ngIf="targetType.value != null">
    <label fd-form-label for="input-showroom-hostname" [required]="true">URL:</label>
    <fd-form-input-message-group>
      <input
        fd-form-control
        type="text"
        id="input-showroom-hostname"
        placeholder="e.g. l2w.demo.hybris.com"
        formControlName="hostname"
        [state]="determineFormControlState(hostname)"
      />
      <fd-form-message *ngIf="hasRequiredErrors(hostname)" [type]="'error'"> {{ REQUIRED }} </fd-form-message>
      <fd-form-message *ngIf="hasShowroomUserRightsErrors(hostname)" [type]="'error'"> {{ SHOWROOM_USER_RIGHTS }}</fd-form-message>
      <fd-form-message *ngIf="hasPatternErrors(hostname)" [type]="'error'"> {{ URL_PATTERN }} </fd-form-message>
    </fd-form-input-message-group>
  </div>
  <br />
</div>

Answer 1

在最后一个输入元素和按钮上添加事件。使用(keydown.enter)='add_showroom()'最后一个输入。

下面是这个想法的一些最小代码。如果需要，还可以检查StackBlitz 。

xx.component.html

<button (click)='add_showroom()'>Add</button><br>
<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select><br>
<input (keydown.enter)='add_showroom()' type='text'/>

xx.组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public add_showroom() {
    alert('adding showroom');
  }
}

一些额外的提示：

• 在处理输入点击之前检查表单是否有效。
• 仅添加(keydown.enter)='add_showroom()'到最后一个元素。一般来说，这比将其添加到一个区域或多个元素更好，因为这可能会导致用户enter在某个地方导航时出现意外的行为。或者使用 Enter 键从下拉列表中选择一个值。
• 使用这个要非常小心。您的用户可能不希望单击回车键来提交表单。所以从用户体验角度来说，它有点灰色地带。至少以某种方式通知您的用户此行为。