CODEWITHSUNDEEP
angularangular-forms
Iskren Lalov
Iskren Lalov

Reputation: 39

Keydown event not working on option in Angular

I have the following code and need to trigger a function when the user presses enter to choose from an option.

If I use (click) event, everything works as expected, however this will only execute the function on click, which is not great for UX.

<form (ngSubmit)="onCreatePost(formData.value)" #formData="ngForm" autocomplete="off" class="form">
    <select name="name" ngModel>
        <option value="" disabled selected>Choose language</option>
        <option *ngFor="let language of languageList" (keydown.enter)="getLanguageCode(language.code)">{{ language.name }}</option>                   
    </select>
    <input type="text" name="code" [ngModel]="langCode">
    <button type="submit" class="button-primary" [disabled]="!formData.valid"><i class="fas fa-plus-circle margin"></i>Submit</button>
</form>

Upvotes: 0

Views: 1900

Answers (3)

Sanath.usk
Sanath.usk

Reputation: 104

try adding on onchange event listener on the select element. The onchange event should trigger irrespective of whether you are using a mouse or keyboard to select the options.

Upvotes: 0

Vivian Mascarenhas
Vivian Mascarenhas

Reputation: 183

var app=angular.module("myapp",[]);

app.directive('myEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
            
             alert("Enter is Pressed");
             event.preventDefault();
            }
        });
    };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myapp">
    <input type="text" my-enter="doSomething()">    
</div>

alternative is to use standard directive ng-keypress="myFunct($event)"

  $scope.myFunct = function(keyEvent) {
  if (keyEvent.which === 13)
alert('I am an alert');
 }

Upvotes: 0

Juan Antonio
Juan Antonio

Reputation: 2614

Try to use (keydown.enter) on select instead of each option. I used it on form and works fine.

Upvotes: 2

Related Questions