Valider la saisie des données avec AngularJS

Lorsque nous travaillons sur la construction d'applications monopages, l'un des points que nous pouvons souligner est la saisie de données, ce type de fonctionnalité se fait généralement à l'aide d'un formeÉvidemment, si nous allons demander des données à un utilisateur, nous devons valider qu'elles ne contiennent pas d'erreurs.
Heureusement AngularJS Il possède des mécanismes internes qui nous permettent de faire des validations de manière simple, permettant ainsi au formulaire d'être envoyé uniquement lorsque les conditions de format de données sont remplies.
La première chose dont nous aurons besoin est un forme, nous allons placer des champs, par exemple nom, prénom et un champ email, généralement, ce sont les types de champs les plus utilisés et qui vont nous donner la possibilité de générer des validations. Voyons le code initial que nous avons :

Nom:Le nom:E-mail:Âge:Envoyer

Si nous regardons, nous avons utilisé les caractéristiques de HTML pour valider les champs, par exemple en plaçant la propriété obligatoire pour les champs obligatoires, ils penseront que cela ne fonctionnera que dans les navigateurs plus récents ou compatibles HTML5 seulement, mais quand on utilise AngularJS, cela remplira les validations alternatives si nous ouvrons l'application dans un navigateur qui n'est pas compatible avec HTML5.
On voit que le champ age a, outre la validation de type, deux propriétés de AngularJS qui sont pour la longueur du champ, cela signifie que nous ne pouvons placer que des nombres entre 1 et 3 chiffres au total.
Jusqu'ici nous allons bien avec notre exercice, cependant nous devons encore valider que pour envoyer les données tout doit être validé, pour cela nous devons générer un contrôleur qui nous permet de faire cela, pour cela nous allons indiquer au formulaire qui contrôleur va utiliser, nous allons changer la ligne:

Par ce qui suit :

À l'intérieur du contrôleur, nous pouvons accéder à une propriété appelée $ valide, qui est celui qui indiquera si notre formulaire est valide pour pouvoir envoyer les données, pour cela nous devons modifier la ligne du bouton d'envoi des données avec ce qui suit :

Envoyer

La modification doit être la suivante :

Envoyer

Enfin nous pouvons créer notre contrôleur en AngularJS avec lequel nous allons traiter nos données :

 function AddControllerUser ($ scope) {$ scope.message = ''; $ scope.addUser = function () {$ scope.message = 'Merci,' + $ scope.user.name + ', il a été ajouté !'; }; } 

Cela devrait nous donner un résultat comme le suivant dans notre navigateur :

Nous voyons que comme il n'y a pas de données, le bouton d'envoi est désactivé, cela changera lorsque nous remplirons les données appropriées comme nous le voyons dans l'image suivante :

Si nous avions placé un email avec un format incorrect, le bouton n'aurait pas été activé, alors nous voyons comment AngularJS Cela nous a facilité le développement dans quelque chose d'aussi simple qu'un formulaire et avec cela nous avons terminé ce tutoriel, nous avons pu valider un formulaire de manière complète, en utilisant uniquement les propriétés de HTML5 Et un petit AngularJS.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif