Angularjs empêche la soumission de formulaires lorsque la validation des entrées échoue

J’écris un formulaire de connexion simple en utilisant angularjs avec une validation des entrées côté client pour vérifier que le nom d’utilisateur et le mot de passe ne sont pas vides et qu’ils sont plus longs que trois caractères. Voir le code ci-dessous:

Et le contrôleur:

 var controller = function($scope) { $scope.login = { submit: function() { Console.info($scope.login.username + ' ' + $scope.login.password); } } };

Le problème est que la fonction login.submit sera appelée même si l’entrée n’est pas valide. Est-il possible d’empêcher ce comportement?

En guise de note, je peux mentionner que j’utilise aussi bootstrap et requirejs.

Tu peux faire:

Pas besoin de contrôles du contrôleur.

Changez le bouton de soumission pour:

Donc, la réponse suggérée par TheHippo ne fonctionnait pas pour moi, au lieu de cela j’ai fini par envoyer le formulaire comme paramètre à la fonction comme ceci:

Cela rend le formulaire disponible dans la méthode du contrôleur:

 $scope.login = { submit : function(form) { if(form.$valid).... }

Vos formulaires sont automatiquement placés dans $ scope en tant qu’object. On peut y accéder via $scope[formName]

Vous trouverez ci-dessous un exemple qui fonctionnera avec votre configuration d’origine et sans avoir à passer le formulaire lui-même en tant que paramètre dans ng-submit.

 var controller = function($scope) { $scope.login = { submit: function() { if($scope.loginform.$invalid) return false; } } };

Exemple de travail: http://plnkr.co/edit/BEWnrP?p=preview

HTML:

Dans votre contrôleur:

 $scope.login = { onSubmit: function(event) { if (dataIsntValid) { displayErrors(); event.preventDefault(); } else { submitData(); } } }

Bien que ce ne soit pas une solution directe pour la question OP, si votre formulaire se trouve dans un contexte ng-app , mais que vous souhaitez que Angular l’ignore complètement, vous pouvez le faire explicitement à l’aide de la directive ngNonBindable :

...

Juste pour append aux réponses ci-dessus,

J’avais un 2 boutons réguliers comme indiqué ci-dessous. (No type = “submit” n’importe où)

Peu importe combien j’ai essayé, en appuyant sur Entrée une fois le formulaire valide , le bouton “Effacer Form” a été appelé, effaçant le formulaire entier.

Comme solution de contournement,

Je devais append un bouton de soumission factice qui était désactivé et caché. Et ce bouton factice devait être sur tous les autres boutons, comme indiqué ci-dessous .

Eh bien, mon intention était de ne jamais soumettre sur Enter, donc le hack donné ci-dessus fonctionne très bien.

Je sais que c’est un vieux sujet mais je pensais que je ferais aussi une consortingbution. Ma solution est similaire à la publication déjà marquée comme une réponse. Certains contrôles JavaScript en ligne font l’affaire.

 ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"

Je sais que c’est tard et qu’on m’a répondu, mais j’aimerais partager les trucs que j’ai faits. J’ai créé une directive ng-validate qui accroche la sous onsubmit du formulaire, puis émet un message de prévention si le $ eval est faux:

 app.directive('ngValidate', function() { return function(scope, element, attrs) { if (!element.is('form')) throw new Error("ng-validate must be set on a form elment!"); element.bind("submit", function(event) { if (!scope.$eval(attrs.ngValidate, {'$event': event})) event.preventDefault(); if (!scope.$$phase) scope.$digest(); }); }; });

Dans votre HTML: