0

I am a React developer who is fairly new to Angular working on a project that was built by a more experienced colleague of mine who is not available to ask for help at the moment. I am trying to do what I believe should be fairly simple. I have found many posts asking for the same help, but none of their solutions seems to work for me.

I simply want to fire a function when the user clicks the enter key on their keyboard. I have been trying the following:

<button type="button" fxFlex="140px" mat-raised-button color="warn" ng-keydown="$event.keyCode === 13 && searchItem()" (click)="onSendEmail(forgotFormElement)" [disabled]="forgotForm.invalid">Send</button>

I found the following snippet in the code already part of the solution, and it fires the onSendEmail function perfectly:

(click)="onSendEmail(forgotFormElement)"

I have read that you can also write this as something like:

ng-click="onSendEmail(forgotFormElement)"

I am assuming the different approaches points to different versions of Angular, and this lead me to try the following:

 <button type="button" fxFlex="140px" mat-raised-button color="warn" (keydown)="$event.keyCode === 13 && searchItem()" (click)="onSendEmail(forgotFormElement)" [disabled]="forgotForm.invalid">Send</button>

None of these worked any better.

I have tried a few other approaches, even removing the key code check to see if it fires if I press any button, but after an hour of getting nowhere, I thought I would ask the Stack Overflow community for help. Does

大陸北方網友
  • 3,696
  • 3
  • 12
  • 37
phunder
  • 1,607
  • 3
  • 17
  • 33
  • Are you using AngularJS (v1.x) or Angular (>= v2)? `ng-click` is AngularJS, `(click)` is Angular ;-) – Franz Diebold Sep 03 '20 at 06:01
  • If you bind keydown event on the button itself, you first have to focus the button and then press the enter key. Is that what you want? Or is your current focus e.g. inside an input field and if you press enter (kind of globally) you want to execute the button action? – user3740359 Sep 03 '20 at 06:01
  • @user3740359 the focus is in a text field when you press enter, so that is then likely my problem. I noted another post that suggested using a directive. Would this be a better approach? – phunder Sep 03 '20 at 06:12
  • @FranzDiebold thank you for your response. As I mentioned I kind of inherited the project. The other developer is very experienced with Angular, and I'm not sure which version he is using. It's a new project, so I assume he is using the latest? – phunder Sep 03 '20 at 06:14
  • @phunder You can check the `package.json` for the version just like in React. – Franz Diebold Sep 03 '20 at 06:15
  • @FranzDiebold "@angular/core": "~8.2.11" – phunder Sep 03 '20 at 06:28

1 Answers1

1

Based on the fact that you want to execute the action when the enter key is pressed not on the button itself, but in other inputs / textfields you could do one of the following:

  1. Bind the (keyup) event on the input fields directly. I would recommend this if the amount of input fields is pretty small - e.g. for a login form.
<input (keyup)="$event.keyCode === 13 && searchItem()">
  1. Listen for the keyup event globally. So a enter press anywhere on the page would trigger the action. You find details about that here How can I listen for keypress event on the whole page?
user3740359
  • 395
  • 1
  • 6
  • 16
  • If you only want to mannage a key you can use `keyup.keyName`, e.g. :``. To listen globally you can use `@HostListener('document:keydown.enter', ['$event'])` – Eliseo Sep 03 '20 at 06:26
  • Thank you! The solution was, as you said, to bind to the input instead of the button :) – phunder Sep 03 '20 at 06:30
  • keycode is deprecated, it would be better to use `$event.key === 'Enter'` – Owen Kelvin Sep 03 '20 at 08:25