Angularjs verhindern das Senden von Formularen, wenn die Eingabevalidierung fehlschlägt

Ich schreibe ein einfaches Anmeldeformular mit anglejs mit einer clientseitigen Eingabevalidierung, um zu überprüfen, ob der Benutzername und das Kennwort nicht leer und länger als drei Zeichen sind. Siehe den folgenden Code:

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

Und der Controller:

var controller = function($scope) {

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

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

};

Das Problem ist, dass die login.submitFunktion auch dann aufgerufen wird, wenn die Eingabe ungültig ist. Ist es möglich, dieses Verhalten zu verhindern?

Als Randnotiz kann ich erwähnen, dass ich auch Bootstrap und Requirejs verwende.

Du kannst tun:

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

Keine Notwendigkeit für Controller-Überprüfungen.

Ändern Sie die Schaltfläche "Senden" in:

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

Die vorgeschlagene Antwort von TheHippo funktionierte also nicht für mich, sondern ich schickte das Formular als Parameter an die Funktion wie folgt:

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

Dadurch wird das Formular in der Controller-Methode verfügbar:

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

Ihre Formulare werden automatisch als Objekt in $ scope eingefügt. Es kann über zugegriffen werden$scope[formName]

Unten finden Sie ein Beispiel, das mit Ihrem ursprünglichen Setup funktioniert und ohne das Formular selbst als Parameter in ng-submit übergeben zu müssen.

var controller = function($scope) {

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

        }
    }

};

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

In Ihrem Controller:

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

Obwohl dies keine direkte Lösung für die OP-Frage ist ng-app, können Sie dies explizit mithilfe der ngNonBindableDirektive tun , wenn sich Ihr Formular in einem Kontext befindet, Angular es jedoch vollständig ignorieren soll :

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

Nur um die obigen Antworten zu ergänzen,

Ich hatte 2 normale Tasten wie unten gezeigt. (Kein Typ = "Submit" irgendwo)

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

Egal wie viel ich versucht habe, die Eingabetaste zu drücken, sobald das Formular gültig war , wurde die Schaltfläche "Formular löschen" aufgerufen, wodurch das gesamte Formular gelöscht wurde.

Um dieses Problem zu umgehen,

Ich musste einen Dummy-Submit-Button hinzufügen, der deaktiviert und ausgeblendet war. Und dieser Dummy-Button musste über allen anderen Buttons liegen, wie unten gezeigt .

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

Nun, meine Absicht war es nie, bei Enter einzureichen, also funktioniert der oben angegebene Hack einfach einwandfrei.

Ich weiß, dass dies ein alter Thread ist, aber ich dachte, ich würde auch einen Beitrag leisten. Meine Lösung ähnelt dem Beitrag, der bereits als Antwort markiert wurde. Einige Inline-JavaScript-Überprüfungen reichen aus.

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

Ich weiß, dass es spät ist und beantwortet wurde, aber ich möchte die netten Sachen teilen, die ich gemacht habe. Ich habe eine ng-validate-Direktive erstellt, die das Onsubmit des Formulars verknüpft. Wenn das $ eval false ist, wird dann die Vorbeugung ausgeführt.

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

In Ihrem HTML:

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