Angularjs impede o envio de formulários quando a validação de entrada falha

Estou escrevendo um formulário de login simples usando angularjs com alguma validação de entrada do lado do cliente para verificar se o nome de usuário e a senha não estão vazios e têm mais de três caracteres. Veja o código abaixo:

<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
    <fieldset>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
        </div>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-lock"></i></span>
            <input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
        </div>

        <div class="control-group">
            <input class="btn" type="submit" value="Log in">
        </div>

    </fieldset>
</form>

E o controlador:

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

O problema é que a login.submitfunção será chamada mesmo que a entrada não seja válida. É possível evitar esse comportamento?

Como observação, posso mencionar que eu também uso o bootstrap e o requirejs.

Você pode fazer:

<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

Não há necessidade de verificações do controlador.

Altere o botão enviar para:

<button type="submit" ng-disabled="loginform.$invalid">Login</button>

Portanto, a resposta sugerida pelo TheHippo não funcionou para mim; acabei enviando o formulário como parâmetro para a função da seguinte maneira:

<form name="loginform" novalidate ng-submit="login.submit(loginForm)" class="css-form">

Isso disponibiliza o formulário no método do controlador:

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

Seus formulários são automaticamente colocados em $ scope como um objeto. Pode ser acessado via$scope[formName]

Abaixo está um exemplo que funcionará com sua configuração original e sem a necessidade de passar o próprio formulário como parâmetro no ng-submit.

var controller = function($scope) {

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

        }
    }

};

Exemplo de trabalho: http://plnkr.co/edit/BEWnrP?p=preview

HTML:

<div class="control-group">
    <input class="btn" type="submit" value="Log in" ng-click="login.onSubmit($event)">
</div>

No seu controlador:

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

Embora não seja uma solução direta para a questão dos OPs, se seu formulário estiver dentro de um ng-appcontexto, mas você desejar que o Angular o ignore completamente, faça isso explicitamente usando a ngNonBindablediretiva:

<form ng-non-bindable>
  ...
</form>

Apenas para adicionar às respostas acima,

Eu estava usando dois botões regulares, como mostrado abaixo. (Nenhum tipo = "enviar" em qualquer lugar)

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

Não importa o quanto tentei, pressionando enter uma vez que o formulário era válido , o botão "Limpar formulário" foi chamado, limpando todo o formulário.

Como solução alternativa,

Eu tive que adicionar um botão de envio fictício que estava desativado e oculto. E esse botão fictício tinha que estar em cima de todos os outros botões, como mostrado abaixo .

<button type="submit" ng-hide="true" ng-disabled="true">Dummy</button>

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>

<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

Bem, minha intenção nunca foi enviar no Enter, então o hack fornecido acima funciona bem.

Sei que esse é um tópico antigo, mas pensei em fazer uma contribuição. Minha solução sendo semelhante à postagem já marcada como resposta. Algumas verificações de JavaScript embutidas são suficientes.

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

Sei que é tarde e fui atendida, mas gostaria de compartilhar as coisas legais que fiz. Criei uma diretiva ng-validate que conecta o envio do formulário e, em seguida, emite prevent-default se o $ eval for 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();            
    });
  };
});

No seu html:

<form name="offering" method="post" action="offer" ng-validate="<boolean expression">