Angularjs zapobiega przesłaniu formularza, gdy sprawdzanie poprawności danych wejściowych nie powiedzie się

Piszę prosty formularz logowania za pomocą angularjs z pewną weryfikacją danych wejściowych po stronie klienta, aby sprawdzić, czy nazwa użytkownika i hasło nie są puste i nie są dłuższe niż trzy znaki. Zobacz poniższy kod:

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

A kontroler:

var controller = function($scope) {

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

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

};

Problem polega na tym, że login.submitfunkcja zostanie wywołana, nawet jeśli dane wejściowe będą nieprawidłowe. Czy można temu zapobiec?

Na marginesie mogę wspomnieć, że używam również bootstrap i requirejs.

Możesz to zrobić:

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

Nie ma potrzeby sprawdzania kontrolera.

Zmień przycisk przesyłania na:

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

Więc sugerowana odpowiedź z TheHippo nie zadziałała dla mnie, zamiast tego wysłałem formularz jako parametr do funkcji takiej jak:

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

Dzięki temu formularz jest dostępny w metodzie kontrolera:

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

Twoje formularze są automatycznie umieszczane w $ scope jako obiekt. Dostęp do niego można uzyskać za pośrednictwem$scope[formName]

Poniżej znajduje się przykład, który będzie działał z oryginalną konfiguracją i bez konieczności przekazywania samego formularza jako parametru w ng-submit.

var controller = function($scope) {

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

        }
    }

};

Przykład roboczy: 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>

W kontrolerze:

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

Chociaż nie jest to bezpośrednie rozwiązanie dla pytania PO, jeśli twój formularz jest w ng-appkontekście, ale chcesz, aby Angular całkowicie go zignorował, możesz to zrobić bezpośrednio za pomocą ngNonBindabledyrektywy:

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

Aby dodać do powyższych odpowiedzi,

Miałem 2 zwykłe przyciski, jak pokazano poniżej. (Nigdzie nie ma typu = „wyślij”)

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

Bez względu na to, jak bardzo się starałem, naciskając klawisz Enter, gdy formularz był już ważny , został wywołany przycisk „Wyczyść formularz”, który wyczyścił cały formularz.

Aby obejść ten problem,

Musiałem dodać fałszywy przycisk przesyłania, który był wyłączony i ukryty. A ten fałszywy przycisk musiał znajdować się nad wszystkimi innymi przyciskami, jak pokazano poniżej .

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

Cóż, moim zamiarem było nigdy nie poddawać się na Enter, więc powyższy hack działa dobrze.

Wiem, że to stary wątek, ale pomyślałem, że też będę miał swój wkład. Moje rozwiązanie jest podobne do posta już oznaczonego jako odpowiedź. Niektóre wbudowane testy JavaScript załatwiają sprawę.

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

Wiem, że jest późno i otrzymałem odpowiedź, ale chciałbym podzielić się zgrabnymi rzeczami, które zrobiłem. Stworzyłem dyrektywę ng-validate, która przechwytuje przy przesłaniu formularza, a następnie wysyła metodę Prevention-default, jeśli $ eval jest fałszywe:

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

W Twoim html:

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