Angularjs previene el envío de formularios cuando la validación de entrada falla

Estoy escribiendo un formulario de inicio de sesión simple usando angularjs con alguna validación de entrada del lado del cliente para verificar que el nombre de usuario y la contraseña no estén vacíos y tengan más de tres caracteres. Vea el siguiente código:

Y el controlador:

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

El problema es que se login.submit función login.submit incluso si la entrada no es válida. ¿Es posible prevenir este comportamiento?

Como nota al margen, puedo mencionar que también uso bootstrap y requirejs.

Tu puedes hacer:

 

No es necesario verificar el controlador.

Cambie el botón de enviar a:

  

Entonces, la respuesta sugerida de TheHippo no me funcionó, sino que terminé enviando el formulario como un parámetro a la función de esta manera:

 

Esto hace que la forma esté disponible en el método del controlador:

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

Sus formularios se ponen automáticamente en $ scope como un objeto. Se puede acceder a través de $scope[formName]

A continuación se muestra un ejemplo que funcionará con su configuración original y sin tener que pasar el formulario como parámetro en ng-submit.

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

Ejemplo de trabajo: http://plnkr.co/edit/BEWnrP?p=preview

HTML:

 

En tu controlador:

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

Aunque no es una solución directa para la pregunta de OP, si su formulario está dentro ng-app contexto ng-app , pero desea que Angular lo ignore por completo, puede hacerlo explícitamente usando la directiva ngNonBindable :

 
...

Solo para agregar a las respuestas anteriores,

Estaba teniendo un 2 botones regulares como se muestra a continuación. (Sin tipo = “enviar” en cualquier lugar)

   

No importa cuánto lo intenté, al presionar Enter una vez que el formulario era válido , se llamó al botón “Clear Form”, borrando todo el formulario.

Como una solución,

Tuve que agregar un botón de envío ficticio que estaba deshabilitado y oculto. Y este botón simulado tenía que estar encima de todos los otros botones como se muestra a continuación .

    

Bueno, mi intención nunca fue presentar en Enter, por lo que el truco anterior funciona bien.

Sé que este es un hilo viejo, pero pensé que también haría una contribución. Mi solución es similar a la publicación ya marcada como respuesta. Algunas comprobaciones de JavaScript en línea hacen el truco.

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

Sé que es tarde y me respondieron, pero me gustaría compartir las cosas ordenadas que hice. Creé una directiva ng-validate que engancha el envío del formulario, luego emite prevent-default si $ eval es 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(); }); }; }); 

En tu html: