Comment vérifier la validité d'un formulaire avec angularjs ?

Question

Je suis très novice en matière d'angularjs. Disons que mon application a un formulaire. En utilisant l'inspecteur, j'ai remarqué que si angularjs pense que le formulaire est invalide, il ajoute une classe ng-invalid au formulaire. J'aime bien.

Il semble donc que pour vérifier si le formulaire est valide, je doive polluer mon code avec des sélecteurs Jquery ! Quel est le moyen angularjs d'indiquer la validité d'un formulaire sans utiliser de contrôleur de formulaire ?

Answer 1

Lorsque vous mettez <form> dans votre ngApp, AngularJS ajoute automatiquement un contrôleur de formulaire (il existe en fait une directive, appelée form qui ajoutent un comportement nécessaire). La valeur de l'attribut name sera liée à votre champ d'application ; ainsi, quelque chose comme <form name="yourformname">...</form> satisfera :

Un formulaire est une instance de FormController. L'instance de formulaire peut éventuellement être publiée dans le champ d'application à l'aide de l'attribut name.

Ainsi, pour vérifier la validité du formulaire, vous pouvez vérifier la valeur de $scope.yourformname.$valid du champ d'application.

Pour plus d'informations, consultez le site Section du guide du développeur sur les formulaires.

Answer 2

Exemple

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

Answer 3

Vous pouvez également utiliser myform.$invalid

Par exemple

if($scope.myform.$invalid){return;}

Answer 4

formulaire

• dans le module ng Directive qui instancie le FormController.

Si l'attribut name est spécifié, le contrôleur de formulaires est publié dans la portée actuelle sous ce nom.

Alias : ngForm

Dans Angular, les formulaires peuvent être imbriqués. Cela signifie que le formulaire extérieur est valide lorsque tous les formulaires enfants le sont également. Cependant, les navigateurs n'autorisent pas l'imbrication des éléments, c'est pourquoi Angular fournit la directive ngForm qui se comporte de la même manière que les formulaires, mais qui peut être imbriquée. Cela vous permet d'avoir des formulaires imbriqués, ce qui est très utile lorsque vous utilisez des directives de validation Angular dans des formulaires générés dynamiquement à l'aide de la directive ngRepeat. Comme vous ne pouvez pas générer dynamiquement l'attribut name des éléments d'entrée à l'aide de l'interpolation, vous devez envelopper chaque ensemble d'entrées répétées dans une directive ngForm et les imbriquer dans un élément de formulaire extérieur.

Classes CSS

ng-valid est défini si le formulaire est valide.

ng-invalid est défini si le formulaire n'est pas valide.

ng-pristine est défini si le formulaire est vierge.

ng-dirty est activée si le formulaire est sale.

ng-submitted est défini si le formulaire a été soumis.

Gardez à l'esprit que ngAnimate peut détecter chacune de ces classes lorsqu'elles sont ajoutées ou supprimées.

Soumettre un formulaire et empêcher l'action par défaut

Étant donné que le rôle des formulaires dans les applications Angular côté client est différent de celui des applications classiques à aller-retour, il est souhaitable que le navigateur ne traduise pas la soumission du formulaire en un rechargement complet de la page qui envoie les données au serveur. Au lieu de cela, une logique javascript devrait être déclenchée pour gérer la soumission du formulaire d'une manière spécifique à l'application.

Pour cette raison, Angular empêche l'action par défaut (soumission du formulaire au serveur) à moins que l'élément n'ait un attribut action spécifié.

Vous pouvez utiliser l'une des deux méthodes suivantes pour spécifier quelle méthode javascript doit être appelée lorsqu'un formulaire est soumis :

ngSubmit sur l'élément de formulaire

ngClick sur le premier bouton ou champ de saisie de type submit (input[type=submit])

Pour éviter une double exécution du gestionnaire, n'utilisez qu'une seule des directives ngSubmit ou ngClick.

Ceci est dû aux règles de soumission de formulaire suivantes dans la spécification HTML :

Si un formulaire ne comporte qu'un seul champ de saisie, le fait d'appuyer sur Entrée dans ce champ déclenche l'envoi du formulaire (ngSubmit). si un formulaire comporte plus de 2 champs de saisie et aucun bouton ou input[type=submit] ensuite, le fait d'appuyer sur la touche Entrée ne déclenche pas l'envoi de l'information si un formulaire comporte un ou plusieurs champs de saisie et un ou plusieurs boutons ou input[type=submit] alors le fait d'appuyer sur la touche Entrée dans l'un des champs de saisie déclenchera le gestionnaire de clic sur le premier bouton ou sur le bouton input[type=submit] (ngClick) et un gestionnaire de soumission sur le formulaire qui l'entoure (ngSubmit).

Tout changement de ngModelOptions en cours sera effectué immédiatement lorsqu'un formulaire sera soumis. Notez que les événements ngClick se produiront avant que le modèle ne soit mis à jour.

Utilisez ngSubmit pour avoir accès au modèle mis à jour.

app.js :

angular.module('formExample', [])
  .controller('FormController', ['$scope', function($scope) {
    $scope.userType = 'guest';
  }]);

Formulaire :

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

Source : AngularJS : API : form