Comment puis-je vérifier la validité du formulaire avec angularjs?

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>

Vous pouvez également utiliser myform.$invalid

Par exemple

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

Forme

• directive dans le module ng Directive qui instancie FormController.

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

Alias: ngForm

Dans Angular, les formes peuvent être imbriquées. Cela signifie que le formulaire externe est valide lorsque tous les formulaires enfants sont également valides. Cependant, les navigateurs n'autorisent pas l'imbrication d'éléments, donc Angular fournit la directive ngForm qui se comporte de manière identique à mais peut être imbriqué. Cela vous permet d'avoir des formulaires imbriqués, ce qui est très utile lorsque vous utilisez des directives de validation angulaire dans des formulaires générés dynamiquement à l'aide de la directive ngRepeat. Puisque 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 externe.

Les classes CSS

Ng-valide est défini si le formulaire est valide.

Ng-invalide est défini si le formulaire n'est pas valide.

Ng-vierges est défini si la forme est parfaite.

Ng-sale est défini si le formulaire est sale.

Ng-soumis 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 et supprimées.

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

Depuis le rôle des formulaires côté client Angular applications est différent que dans les applications classiques aller-retour, il est souhaitable que le navigateur ne traduise pas la soumission de formulaire en un rechargement de page complète 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 de formulaire au serveur) sauf si l'élément a un attribut d'action spécifié.

Vous pouvez utiliser l'un des voici deux façons de spécifier quelle méthode javascript doit être appelée lorsqu'un formulaire est soumis:

NgSubmit directive sur l'élément de formulaire

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

Pour éviter la double exécution du gestionnaire, utilisez 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 a seulement un champ de saisie puis en appuyant sur entrée dans ce champ déclenche formulaire soumettre (ngSubmit) si un formulaire contient plus de 2 champs de saisie et aucun bouton ou input[type=submit], Appuyer sur Entrée ne déclenche pas l'envoi si un formulaire a un ou plusieurs champs d'entrée et un ou plusieurs boutons ou input[type=submit], puis appuyez sur entrée dans les champs de saisie de déclencher le gestionnaire de clic sur le premier bouton ou input[type=submit] (ngClick) et un gestionnaire de soumission sur l'affichage de la forme (ngSubmit).

Toute modification ngmodeloptions en attente aura lieu immédiatement lorsque un formulaire joint est soumis. Notez que les événements ngClick se produiront avant la mise à jour du modèle.

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

App.js :

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

Forme:

<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: la forme