Soumettre le formulaire en appuyant sur Entrée avec AngularJS

Question

Dans ce cas particulier, quelles sont les options dont je dispose pour que ces entrées appellent une fonction lorsque j'appuie sur la touche Entrée ?

// HTML view //
<form>
    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
    <br />
    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
</form>

// Controller //
.controller('mycontroller', ['$scope',function($scope) {
    $scope.name = '';
    $scope.email = '';
    // Function to be called when pressing ENTER
    $scope.myFunc = function() {
       alert('Submitted');
    };
}])

Answer 1

Angular prend cela en charge dès le départ. Avez-vous essayé ngSubmit sur votre élément de formulaire ?

<form ng-submit="myFunc()" ng-controller="mycontroller">
   <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
</form>

EDIT : Pour le commentaire concernant le bouton de soumission, voir Soumission d'un formulaire en appuyant sur la touche Entrée sans bouton de soumission ce qui donne la solution de :

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

Si vous n'aimez pas la solution du bouton d'envoi caché, vous devrez lier une fonction de contrôleur à l'événement d'appui sur la touche Enter ou à l'événement keyup. Cela nécessite normalement une directive personnalisée, mais la bibliothèque AngularUI dispose déjà d'une solution de pression de touche intéressante. Voir http://angular-ui.github.com/

Après avoir ajouté la librairie angularUI, votre code serait quelque chose comme :

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

ou vous pouvez lier la touche d'entrée à chaque champ individuel.

Vous pouvez également consulter les questions du SO pour créer une directive keypres simple : Comment détecter onKeyUp dans AngularJS ?

MODIFIER (2014-08-28) : Au moment où cette réponse a été écrite, ng-keypress/ng-keyup/ng-keydown n'existaient pas en tant que directives natives dans AngularJS. Dans les commentaires ci-dessous @darlan-alves a une assez bonne solution avec :

<input ng-keyup="$event.keyCode == 13 && myFunc()"... />

Answer 2

Si vous voulez appeler la fonction sans la forme, vous pouvez utiliser ma directive ngEnter :

Javascript :

angular.module('yourModuleName').directive('ngEnter', function() {
        return function(scope, element, attrs) {
            element.bind("keydown keypress", function(event) {
                if(event.which === 13) {
                    scope.$apply(function(){
                        scope.$eval(attrs.ngEnter, {'event': event});
                    });

                    event.preventDefault();
                }
            });
        };
    });

HTML :

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    
</div>

Je soumets aux autres d'impressionnantes directives sur mon twitter et mon compte gist .

Answer 3

Si vous n'avez qu'une seule entrée, vous pouvez utiliser la balise form.

<form ng-submit="myFunc()" ...>

Si vous avez plus d'une entrée, ou si vous ne voulez pas utiliser la balise de formulaire, ou si vous voulez attacher la fonctionnalité de touche d'entrée à un champ spécifique, vous pouvez la mettre en ligne sur une entrée spécifique comme suit :

<input ng-keyup="$event.keyCode == 13 && myFunc()" ...>

Answer 4

Je voulais quelque chose d'un peu plus extensible/sémantique que les réponses données. J'ai donc écrit une directive qui prend un objet javascript d'une manière similaire à la directive intégrée ngClass :

HTML

<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>

Les valeurs de l'objet sont évaluées dans le contexte de la portée de la directive - assurez-vous qu'elles sont placées entre guillemets simples, sinon toutes les fonctions seront exécutées lorsque la directive sera chargée ( !).

Donc, par exemple : esc : 'clear()' au lieu de esc : clear()

Javascript

myModule
    .constant('keyCodes', {
        esc: 27,
        space: 32,
        enter: 13,
        tab: 9,
        backspace: 8,
        shift: 16,
        ctrl: 17,
        alt: 18,
        capslock: 20,
        numlock: 144
    })
    .directive('keyBind', ['keyCodes', function (keyCodes) {
        function map(obj) {
            var mapped = {};
            for (var key in obj) {
                var action = obj[key];
                if (keyCodes.hasOwnProperty(key)) {
                    mapped[keyCodes[key]] = action;
                }
            }
            return mapped;
        }

        return function (scope, element, attrs) {
            var bindings = map(scope.$eval(attrs.keyBind));
            element.bind("keydown keypress", function (event) {
                if (bindings.hasOwnProperty(event.which)) {
                    scope.$apply(function() {
                         scope.$eval(bindings[event.which]);
                    });
                }
            });
        };
    }]);

Answer 5

L'utilisation d'une classe CSS au lieu de la répétition des styles en ligne sera légèrement plus soignée.

CSS

input[type=submit] {
    position: absolute;
    left: -9999px;
}

HTML

<form ng-submit="myFunc()">
    <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
    <input type="submit" />
</form>