Angularjs impedisce l'invio del modulo quando la convalida dell'input non riesce

Sto scrivendo un semplice modulo di accesso utilizzando 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:

<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 il controller:

var controller = function($scope) {

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

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

};

Il problema è che la login.submitfunzione verrà chiamata anche se l'ingresso non è valido. È possibile prevenire questo comportamento?

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

Tu puoi fare:

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

Non sono necessari controlli del controller.

Cambia il pulsante di invio in:

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

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:

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

Ciò rende il modulo disponibile nel metodo del controller:

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

I moduli vengono automaticamente inseriti in $ scope come oggetto. È possibile accedervi 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:

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

Nel tuo controller:

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

Sebbene non sia una soluzione diretta per la domanda dei PO, se il tuo modulo si trova in un ng-appcontesto, ma vuoi che Angular lo ignori del tutto, puoi farlo esplicitamente usando la ngNonBindabledirettiva:

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

Solo per aggiungere alle risposte sopra,

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

<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>

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

Come soluzione alternativa,

Ho dovuto aggiungere un pulsante di invio fittizio che era disabilitato e nascosto. E questo pulsante fittizio doveva trovarsi sopra tutti gli altri pulsanti, come mostrato di seguito .

<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>

Bene, la mia intenzione non è mai stata quella di inviare su Enter, quindi l'hack sopra indicato funziona bene.

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 JavaScript in linea sono utili.

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

So che è tardi e mi è stato risposto, ma mi piacerebbe condividere le cose pulite che ho fatto. Ho creato una direttiva ng-validate che aggancia 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:

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