Comment vérifier la validité du formulaire avec angularjs?

Je suis très nouveau pour angularjs. Disons que mon application a un formulaire. En utilisant l’inspecteur, j’ai remarqué que si angularjs pense que le formulaire n’est pas valide, il ajoute une classe ng-invalide au formulaire. Charmant.

Il semble donc que pour vérifier si le formulaire est valide, je dois polluer mon code avec le sélecteur Jquery?! Quelle est la manière angularjs d’indiquer la validité du formulaire sans utiliser un contrôleur de formulaire?

Lorsque vous placez la

dans ngApp, AngularJS ajoute automatiquement le contrôleur de formulaire (en fait, il existe une directive, appelée form qui ajoute un comportement nessaire). La valeur de l’atsortingbut name sera liée à votre scope. alors quelque chose comme

...

satisfera:

Un formulaire est une instance de FormController. L’instance de formulaire peut éventuellement être publiée dans l’étendue à l’aide de l’atsortingbut name.

Donc, pour vérifier la validité du formulaire, vous pouvez vérifier la valeur de $scope.yourformname.$valid Propriété $scope.yourformname.$valid de la scope.

Vous pouvez obtenir plus d’informations dans la section Guide du développeur sur les formulaires.

Exemple

 
Name:
Email:

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’atsortingbut name est spécifié, le contrôleur de formulaire est publié sur l’étendue actuelle sous ce nom.

Alias: ngForm

Dans Angular, les formulaires peuvent être nesteds. Cela signifie que le formulaire externe est valide lorsque toutes les fiches enfants sont également valides. Toutefois, les navigateurs n’autorisent pas l’imbrication des éléments. Par conséquent, Angular fournit la directive ngForm qui se comporte de manière identique mais peut être nestede. Cela vous permet d’avoir des formulaires nesteds, ce qui est très utile lorsque vous utilisez des directives de validation angular dans des formulaires générés dynamicment à l’aide de la directive ngRepeat. Comme vous ne pouvez pas générer dynamicment l’atsortingbut name des éléments d’entrée à l’aide d’une 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.

Classes CSS

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

ng-invalide est défini si le formulaire n’est pas valide.

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

ng-dirty est défini si le formulaire est sale.

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

N’oubliez pas que ngAnimate peut détecter chacune de ces classes une fois ajoutées et supprimées.

Envoi d’un formulaire et prévention de l’action par défaut

Puisque le rôle des formulaires dans les applications angulars côté client est différent de celui des applications classiques, 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 doit ê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 (envoi de formulaire au serveur), à moins que l’élément n’ait un atsortingbut d’action spécifié.

Vous pouvez utiliser l’une des deux méthodes suivantes pour spécifier la méthode JavaScript à appeler lorsqu’un formulaire est soumis:

Directive ngSubmit sur l’élément de formulaire

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

Pour empêcher la double exécution du gestionnaire, utilisez uniquement l’une des directives ngSubmit ou ngClick.

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

Si un formulaire ne possède qu’un seul champ de saisie, appuyez sur Entrée dans ce champ. Les déclencheurs forment submit (ngSubmit) si un formulaire a plus de 2 champs de saisie et aucun bouton ou input[type=submit] un ou plusieurs champs de saisie et un ou plusieurs boutons ou input[type=submit] puis appuyer sur enter dans l’un des champs de saisie déclenche le gestionnaire de clics sur le premier bouton ou input[type=submit] (ngClick) et un gestionnaire de soumission sur le formulaire englobant (ngSubmit).

Toute modification de ngModelOptions en attente aura lieu immédiatement lors de l’envoi d’un formulaire. Notez que les événements ngClick se produiront avant la mise à jour du modèle.

Utilisez ngSubmit pour accéder au modèle mis à jour.

app.js :

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

Forme :

 
userType: Required! userType = {{userType}} myForm.input.$valid = {{myForm.input.$valid}} myForm.input.$error = {{myForm.input.$error}} myForm.$valid = {{myForm.$valid}} myForm.$error.required = {{!!myForm.$error.required}}

Source: AngularJS: API: form