Comment soumettre un formulaire en utilisant ng-submit
Les processus de soumission d'informations sur une page Web sont normalement gérés par l'événement de soumission sur le navigateur Web. Cet événement est normalement utilisé pour envoyer des informations que l'utilisateur aurait pu saisir sur une page Web au serveur pour un traitement ultérieur comme les informations de connexion, les données de formulaire, etc. La soumission d'informations peut être effectuée via une requête GET ou POST.
AngularJS fournit également une directive appelée ng-submit qui peut être utilisée pour lier l'application à l'événement submit du navigateur. Ainsi, dans le cas d'AngularJS, lors de l'événement de soumission, vous pouvez effectuer un traitement dans le contrôleur lui-même, puis afficher les informations traitées à l'utilisateur.
Prenons un exemple de la façon dont nous pouvons y parvenir.
Dans notre exemple de soumission-publication,
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 d'envoi sur la page, qui, lorsqu'il est pressé, ajoutera le sujet à une liste non ordonnée.
Event Registration Guru99 Global Event
Explication du code:
- Nous déclarons d'abord notre balise HTML de formulaire, qui contiendra le contrôle "zone de texte" et "bouton d'envoi". Nous utilisons alors la directive 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. Cela sera lié à une variable appelée «Topic» qui sera utilisée dans notre contrôleur.
- Il y a le bouton d'envoi normal sur lequel l'utilisateur cliquera lorsqu'il aura saisi le sujet qu'il souhaite.
- Nous avons utilisé la directive ng-repeat pour afficher les éléments de liste des sujets saisis par l'utilisateur. La directive ng-repeat parcourt chaque rubrique du tableau 'AllTopic' et affiche le nom de la rubrique en conséquence.
- Dans notre contrôleur, nous déclarons une variable de tableau appelée «AllTopic». Cela 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 cliquera 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 le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
Pour voir le code fonctionner, entrez d'abord un nom de sujet comme "AngularJS" 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é entré 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 passe par chaque valeur de la variable de tableau 'AllTopic' et les affiche en conséquence comme des éléments de liste.
Résumé
La directive "ng-submit" est utilisée pour traiter la saisie saisie par l'utilisateur lors de la soumission du formulaire.