angular 2 material keyup.enter does not fire at all

Question

I am trying to hit enter key to press a button on my login form. However it does not. The code looks like:

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

I have no idea why it is not firing. No error in console and angular documentation does not indicate any special requirement for it to work.

Answer 1

If the controls are in a form, the ngSubmit event will be triggered when Enter is pressed. To also trigger the event by clicking the button, you should remove the attribute type="button". The default type is type="submit" when the button is in a form.

<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...
  }
}

You can test the code in this stackblitz.