Angularjs giriş doğrulama başarısız olduğunda form gönderilmesini önler

Kullanıcı adı ve şifrenin boş ve üç karakterden uzun olmadığını kontrol etmek için bazı istemci tarafı giriş doğrulaması ile angularjs kullanarak basit bir giriş formu yazıyorum. Aşağıdaki koda bakın:

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

Ve denetleyici:

var controller = function($scope) {

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

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

};

Sorun, login.submitgiriş geçerli olmasa bile işlevin çağrılmasıdır. Bu davranışı önlemek mümkün müdür?

Bir yan not olarak ben de bootstrap ve requirjs kullandığımı söyleyebilirim.

Yapabilirsin:

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

Kontrolör kontrollerine gerek yoktur.

Gönder düğmesini şu şekilde değiştirin:

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

Bu yüzden TheHippo tarafından önerilen cevap benim için işe yaramadı, bunun yerine formu böyle bir işleve parametre olarak gönderme sona erdi:

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

Bu, formu denetleyici yönteminde kullanılabilir hale getirir:

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

Formlarınız nesne olarak otomatik olarak $ kapsamına alınır. Erişilebilir$scope[formName]

Aşağıda, orijinal kurulumunuzla çalışacak ve formun kendisini ng-gönder sırasında bir parametre olarak iletmek zorunda kalmadan çalışacak bir örnek bulunmaktadır.

var controller = function($scope) {

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

        }
    }

};

Çalışma örneği: 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>

Kumandanızda:

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

OP sorusu için doğrudan bir çözüm olmasa da, formunuz bir ng-appbağlam dahilindeyse , ancak Angular'ın bunu tamamen göz ardı etmesini istiyorsanız, bunu doğrudan ngNonBindableyönergeyi kullanarak yapabilirsiniz :

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

Sadece yukarıdaki cevaplara eklemek için,

Aşağıda gösterildiği gibi 2 normal düğme vardı. (Tür yok = "gönder" herhangi bir yerde)

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

Ne kadar denersem deneyim, form geçerli olduğunda enter tuşuna basıldığında , tüm formu temizleyerek "Formu Temizle" düğmesi çağrıldı.

Geçici bir çözüm olarak,

Devre dışı bırakılmış ve gizlenmiş bir kukla gönderme düğmesi eklemek zorunda kaldım. Ve bu sahte düğmenin aşağıda gösterildiği gibi diğer düğmelerin üstünde olması gerekiyordu .

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

Niyetim asla Enter'a boyun eğmek değildi, bu yüzden yukarıda verilen hack iyi çalışıyor.

Bu eski bir konu olduğunu biliyorum ama ben de bir katkı yapmak düşündüm. Benim çözümüm zaten cevap olarak işaretlenmiş gönderiye benzer. Bazı satır içi JavaScript denetimleri hile yapar.

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

Geç olduğunu ve cevaplandığını biliyorum, ama yaptığım düzgün şeyleri paylaşmak istiyorum. Formun gönderilmesini kanca bir ng-validate yönergesi oluşturdum, sonra $ eval yanlış ise önleme-varsayılan sorunları:

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

HTML'nizde:

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