ng-submit dans AngularJS : Gestion de la soumission de formulaires avec exemple
James Hartmann
⚡ Résumé intelligent
La directive ng-submit d'AngularJS lie une fonction de contrôleur à l'événement de soumission du formulaire par le navigateur, de sorte que les valeurs saisies sont traitées à l'intérieur du contrôleur et que la page ne se recharge jamais via une requête POST par défaut.
Directive AngularJS ng-submit
Le ng-soumettre La directive dans AngularJS est utilisée pour lier l’application à l’événement submit du navigateur. Donc dans le cas de AngularJS lors de l'événement submit, vous pouvez effectuer certains traitements au sein du contrôleur lui-même, puis afficher les informations traitées à l'utilisateur.
Note de version : AngularJS 1.x n'est plus pris en charge à long terme depuis le 31 décembre 2021, et l'équipe du framework confirme que Le support d'AngularJS a officiellement pris fin. En janvier 2022, aucune mise à jour ni correctif de sécurité n'a été publié depuis. Chaque étape et chaque bloc de code ci-dessous sont conservés tels quels, à titre de référence historique. Les nouveaux développements s'inscrivent dans la version moderne d'Angular, qui exprime la même idée. (ngSubmit) lié à un FormGroup.
Comment soumettre un formulaire dans AngularJS en utilisant ng-submit
Les processus de soumission d'informations sur une page Web sont normalement gérés par l'événement submit sur le navigateur Web. Cet événement est normalement utilisé pour envoyer au serveur les informations que l'utilisateur aurait pu saisir sur une page Web pour un traitement ultérieur, telles que les informations de connexion, les données de formulaire, etc. La soumission des informations peut être effectuée via une requête GET ou POST.
Prenons un exemple de soumission de formulaire angulaire pour voir comment soumettre des formulaires dans AngularJS.
Dans notre exemple de soumission de formulaire AngularJS, nous allons présenter une zone de texte à l'utilisateur dans laquelle il peut saisir le sujet qu'il souhaite apprendre. Il y aura un bouton de soumission sur la page qui, une fois enfoncé, ajoutera le sujet à une liste non ordonnée.
L'illustration ci-dessous trace qui s'enchaîne, du sujet saisi dans la zone de texte, en passant par le bouton Soumettre, jusqu'à l'élément de liste ajouté en dessous.
Exemple de soumission de formulaire AngularJS
Maintenant, nous allons voir un exemple de formulaire AngularJS soumis à partir du contrôleur à l'aide de la directive ng-submit :
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form ng-submit="Display()">
Enter which topic you would like to learn
<input type="text" ng-app="sampleApp" ng-model="Topic"><br>
<input type="submit" value="Submit"/>
<ul ng-repeat="topicname in AllTopic">
<li>{{topicname}}</li>
</ul>
</form>
</div>
<script>
var sampleApp = angular.module("sampleApp",[]);
sampleApp.controller("AngularController",function($scope) {
$scope.AllTopic=[];
$scope.Display = function () {
$scope.AllTopic.push($scope.Topic);
}
});
</script>
</body>
</html>
Code Explication:
- Nous commençons par déclarer la balise HTML de notre formulaire, qui contiendra le champ texte et le bouton d'envoi, comme illustré dans l'exemple d'événement de soumission de formulaire Angular. Nous utilisons ensuite la directive AngularJS `ng-submit` pour lier la fonction `Display()` à notre formulaire. Cette fonction sera définie dans notre contrôleur et sera appelée lors de la soumission du formulaire.
- Nous avons un contrôle de texte dans lequel l'utilisateur entrera le sujet qu'il souhaite apprendre. Celui-ci sera lié à une variable appelée 'Topic' qui sera utilisée dans notre contrôleur.
- Il y a le bouton de soumission normal dans AngularJS sur lequel l'utilisateur cliquera lorsqu'il aura entré le sujet qu'il souhaite.
- Nous avons utilisé le ng-répétition directive pour afficher les éléments de liste des sujets saisis par l'utilisateur. La directive ng-repeat parcourt chaque sujet du tableau « AllTopic » et affiche le nom du sujet en conséquence.
- Dans notre contrôleur, nous déclarons une variable de type tableau appelée 'AllTopic'. Celle-ci servira à stocker tous les sujets saisis par l'utilisateur à l'étape 2.
- Nous définissons le code de notre fonction Display() qui sera appelée chaque fois que l'utilisateur clique sur le bouton Soumettre. Ici, nous utilisons la fonction push array pour ajouter les sujets saisis par l'utilisateur via la variable « Topic » dans notre tableau « AllTopic ».
Si l'exemple de code du formulaire AngularJS est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie :
Pour voir le code fonctionner, entrez d'abord un nom de sujet tel que « Angular » comme indiqué ci-dessus dans la zone de texte, puis cliquez sur le bouton Soumettre.
- Après avoir cliqué sur le bouton Soumettre, vous verrez l'élément qui a été saisi dans la zone de texte ajouté à la liste des éléments.
- Ceci est réalisé par la fonction Display(), qui est appelée lorsque le bouton de soumission est enfoncé.
- La fonction Display() ajoute le texte à la variable de tableau appelée « AllTopic ». Et notre directive ng-repeat parcourt chaque valeur de la variable de tableau « AllTopic » et les affiche en conséquence sous forme d'éléments de liste.
ng-submit vs ng-click : lequel utiliser
Le Directives AngularJS Ils peuvent appeler la même fonction de contrôleur, mais ils écoutent des événements de navigateur différents. ng-submit est assis sur le <form> Cette balise réagit à l'événement de soumission, elle se déclenche donc également lorsqu'un utilisateur appuie sur Entrée dans un champ. ng-click Il est actionné par un bouton et ne réagit qu'à un clic de souris ou à une activation équivalente.
| Aspect | ng-soumettre | ng-clic |
|---|---|---|
| Élément hôte | La balise de formulaire | Tout élément cliquable |
| Événement écouté | soumettre, y compris la touche Entrée | clic uniquement |
| navigateur par défaut POST | Supprimé par la directive | Toujours déclenché par un bouton de soumission |
| Accès à l'état du formulaire | Lit les valeurs $valid et $invalid sur le contrôleur de formulaire | Aucun contexte formel propre |
| Ajustement naturel | Transmission des données de formulaire à un contrôleur | Boutons de barre d'outils, liens, déclencheurs modaux |
La compatibilité avec le clavier est généralement le facteur déterminant. Un formulaire câblé avec ng-click Cette fonction ignore la touche Entrée, ce qui est frustrant pour les utilisateurs qui remplissent un champ de connexion. Réserver ng-click pour les actions qui ne sont pas des soumissions de formulaires, comme effacer un champ ou ouvrir une boîte de dialogue.
Pourquoi ng-submit empêche-t-il la soumission par défaut du navigateur ?
Un formulaire HTML simple réagit à un événement de soumission en sérialisant ses champs et en demandant au navigateur de charger une nouvelle page, ce qui supprime toutes les valeurs contenues dans le formulaire. $scopeL’ ng-submit La directive empêche cela de se produire : elle appelle preventDefault() Pour vous, l'expression s'exécute et la page actuelle reste affichée. Non $event Aucun argument n'est requis, aucun appel manuel n'est nécessaire.
La suppression comporte une condition documentée. Selon le Référence ngSubmitL'action par défaut est empêchée uniquement lorsque le formulaire ne contient aucun champ. action, data-action or x-action Ajoutez l'un de ces attributs et le navigateur naviguera normalement une fois le gestionnaire terminé, ce qui est le comportement attendu pour un formulaire rendu côté serveur avec amélioration progressive, mais une surprise dans tous les autres cas.
Étant donné que la directive englobe l'objet événement, lisez les valeurs soumises à partir des propriétés qui ng-modèle écrits dans la portée, ou les transmettre explicitement, comme dans ng-submit="Display(Topic)".
Comment valider un formulaire avant l'exécution de ng-submit
L'exemple ci-dessus accepte un sujet vide, car rien ne vérifie d'abord la zone de texte. AngularJS crée un contrôleur de formulaire pour chaque formulaire nommé, et ce contrôleur expose les indicateurs nécessaires pour contrôler la soumission. novalidate Le navigateur désactive donc ses propres bulles HTML5 et AngularJS. validation de formulaire prend le relais.
- Donnez le formulaire a
nameAngularJS publie un contrôleur portant ce nom sur l'environnement. contrôleur portée. - Ajouter
novalidateà la balise de formulaire afin que la validation native du navigateur ne gêne pas. - Marquez les champs, en utilisant
required,ng-minlength,ng-maxlengthorng-pattern. - Protégez le manipulateur avec
$validet transmettez le contrôleur de formulaire afin que la fonction puisse examiner chaque champ individuellement. - Désactiver le bouton avec
ng-disabledpointant du doigt$invalid, ce qui permet un retour visuel immédiat.
<form name="topicForm" ng-submit="topicForm.$valid && Display(topicForm)" novalidate> <input type="text" name="Topic" ng-model="Topic" required> <input type="submit" value="Submit" ng-disabled="topicForm.$invalid"> </form>
Deux erreurs sont à l'origine de la plupart des problèmes signalés avec ce modèle :
- Double soumission. Fixations
ng-clicksur le bouton de soumission pendantng-submitLe gestionnaire est exécuté deux fois sur le formulaire, une fois par événement. La documentation officielle déconseille de combiner les deux gestionnaires ; il est donc recommandé d'en choisir un seul. - Soumissions inattendues. N'importe quel bouton à l'intérieur d'un formulaire sans
type="button"Déclenche l'événement de soumission. Marquez explicitement les boutons Annuler et Réinitialiser, sinon ils déclencheront également le gestionnaire.
Garder sur $valid Il s'agit d'une mesure de commodité, et non d'une mesure de sécurité. Les valeurs doivent toujours être revalidées sur le serveur avant d'être enregistrées.
