Comment valider un formulaire via la touche entrée avec AngularJS ?

Le framework AngularJS permet de faire en sorte qu'un appui sur la touche "Entrée" déclenche la validation.

Les formulaires développés sur les sites internet sont généralement conçus pour qu'un appui sur la touche "Entrée" déclenche la validation. Le but est de faciliter l'expérience de l'utilisateur en lui permettant de remplir et valider un formulaire sans enlever les mains du clavier. Le framework AngularJS gère cette fonctionnalité. La méthode la plus simple est de créer un bouton de type "submit" dans votre formulaire :

<input type="submit"/>

Vous pouvez ensuite gérer l'appui de la touche "Entrée" avec l'attribut "ngSubmit". Si vous n'avez pas de bouton de type "submit", vous pouvez en ajouter un qui ne sera pas visible pour l'utilisateur :

<form ng-submit="maFonction()" ng-controller="monControleur">
<!-- Bouton de soumission invisible pour l'utilisateur -->
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>

AngularJS dispose nativement de la directive "ng-keypress" qui permet d'appeler une fonction lors de l'appui sur un bouton. Il suffit alors de détecter quelle touche a été appuyée, sachant que le code correspondant à la touche "Entrée" est le nombre 13.

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

Vous pouvez également créer une directive qui s'enclenchera lors de l'appui d'une touche, et appellera la fonction en valeur de l'attribut :

//JavaScript
angular.module('yourModuleName').directive('appuiToucheEntree', function() {
 return function(scope, element, attrs) {
 element.bind("keydown keypress", function(event) {
 if(event.which === 13) {
 scope.$apply(function(){
 scope.$eval(attrs.appuiToucheEntree, {'event': event});
 });
 event.preventDefault();
 }
 });
 };
 });
<!-- HTML -->
<div ng-app="" ng-controller="monControleur">
 <input type="text" appui-touche-entree="maFonction()"> 
</div>

AngularJS