Angularjs impedisce l’invio di moduli quando la convalida dell’input non riesce

Sto scrivendo un semplice modulo di accesso usando angularjs con alcune convalide dell’input lato client per verificare che il nome utente e la password non siano vuoti e più lunghi di tre caratteri. Vedi il codice seguente:

E il controller:

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

Il problema è che la funzione login.submit verrà chiamata anche se l’input non è valido. È ansible prevenire questo comportamento?

Come nota a margine posso menzionare che uso anche bootstrap e requirejs.

Tu puoi fare:

 

Non c’è bisogno di controlli del controller.

Cambia il pulsante di invio per:

  

Quindi la risposta suggerita da TheHippo non ha funzionato per me, invece ho finito per inviare il modulo come parametro alla funzione in questo modo:

 

Questo rende il modulo disponibile nel metodo del controller:

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

I moduli vengono automaticamente inseriti in $ scope come object. Si può accedere tramite $scope[formName]

Di seguito è riportato un esempio che funzionerà con la configurazione originale e senza dover passare il modulo stesso come parametro in ng-submit.

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

Esempio di lavoro: http://plnkr.co/edit/BEWnrP?p=preview

HTML:

 

Nel tuo controller:

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

Sebbene non sia una soluzione diretta per la domanda OPs, se il tuo modulo è all’interno di un contesto ng-app , ma vuoi che Angular lo ignori del tutto, puoi farlo esplicitamente usando la direttiva ngNonBindable :

 
...

Solo per aggiungere le risposte sopra,

Avevo 2 pulsanti regolari come mostrato di seguito. (Nessun tipo = “invia” ovunque)

   

Non importa quanto ho provato, premendo invio una volta che il modulo era valido , il pulsante “Cancella modulo” è stato chiamato, cancellando l’intero modulo.

Come soluzione alternativa,

Ho dovuto aggiungere un pulsante di invio fittizio distriggersto e nascosto. E questo pulsante fittizio doveva essere in cima a tutti gli altri pulsanti come mostrato di seguito .

    

Bene, la mia intenzione non era mai quella di presentare su Enter, quindi l’hack sopra riportato funziona perfettamente.

So che questo è un vecchio thread ma ho pensato di dare anche un contributo. La mia soluzione è simile al post già contrassegnato come risposta. Alcuni controlli inline JavaScript fanno il trucco.

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

So che è tardi e mi è stato risposto, ma mi piacerebbe condividere le cose belle che ho fatto. Ho creato una direttiva ng-validate che aggancia l’onsubmit del modulo, quindi emette prevent-default se $ eval è falso:

 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(); }); }; }); 

Nel tuo html: