angular 2 material keyup.enter 根本不触发

Question

我正在尝试按回车键来按下登录表单上的按钮。然而事实并非如此。代码如下:

<div>
  <button type="button" mat-raised-button (click)="doLogin()" (keyup.enter)="doLogin()">
    Sign In
  </button>
</div>

我不知道为什么它不开火。控制台和 Angular 文档中没有错误并不表示它有任何特殊的工作要求。

Answer 1

如果控件在表单中，则 ngSubmit 事件将在按下 Enter 时触发。要通过单击按钮也触发事件，您应该删除属性 type="button"。当按钮位于表单中时，默认类型为 type="submit"。

<form (ngSubmit)="onNgSubmit()">
  <div>
    <input type="text" name="username" placeholder="User name" />
    <button mat-raised-button>Sign In</button>
  </div>    
</form>

export class UserFormComponent {
  onNgSubmit() {
    // Proceed with login...
  }
}

您可以测试this stackblitz中的代码.