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

您正在 button 上尝试 keyup，按钮没有该事件，您应该尝试 input 形式

<form >
  <input type="text" (keyup.enter)="doLogin()" />
</form

编辑

如果您想在提交时触发此功能，请使用

 <form (ngSubmit)="doLogin()">

Answer 2

试试这个。这对我来说很好用。希望对您有所帮助！

<form>
  <input type="text" (keyup.enter) = "doLogin($event)">
</form>

在你的组件中：

doLogin(e){
 console.log(e);
}

Answer 3

如果控件在窗体中，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 中的代码。

angular 2 material keyup.enter 根本不触发

angular 2 material keyup.enter does not fire at all

angular

angular-material

keyup