AngularJS ng-submit avec exemple de soumission de formulaire
James Hartmann
Directive AngularJS ng-submit
La 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.
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.
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>
Explication du code :
- Nous déclarons d'abord notre balise HTML de formulaire, qui contiendra le contrôle « zone de texte » et « bouton de soumission », comme indiqué dans l'exemple d'événement de soumission de formulaire angulaire. Nous utilisons ensuite la directive ngsubmit Angular 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 tableau appelée « AllTopic ». Ceci sera utilisé pour contenir 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.
Résumé
- La directive « ng-submit » est utilisée pour traiter l'entrée saisie par l'utilisateur pour la soumission du formulaire dans AngularJS.
- Les processus de soumission d'informations sur une page Web sont normalement gérés par l'événement submit sur le navigateur Web.
- La soumission des informations peut être effectuée via une requête GET ou POST.
- La fonction Display() ajoute le texte à la variable de tableau appelée « AllTopic ».
