Angularjs mencegah pengiriman formulir ketika validasi input gagal

Saya sedang menulis formulir login sederhana menggunakan angularjs dengan beberapa validasi input sisi klien untuk memeriksa bahwa nama pengguna dan kata sandi tidak kosong dan lebih panjang dari tiga karakter. Lihat kode di bawah ini:

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

Dan pengontrolnya:

var controller = function($scope) {

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

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

};

Masalahnya adalah bahwa login.submitfungsi tersebut akan dipanggil bahkan jika inputnya tidak valid. Apakah mungkin untuk mencegah perilaku ini?

Sebagai catatan saya dapat menyebutkan bahwa saya juga menggunakan bootstrap dan requireejs.

Anda dapat melakukan:

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

Tidak perlu untuk memeriksa pengontrol.

Ubah tombol kirim ke:

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

Jadi jawaban yang disarankan dari TheHippo tidak bekerja untuk saya, sebagai gantinya saya akhirnya mengirim formulir sebagai parameter ke fungsi seperti:

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

Ini membuat formulir tersedia dalam metode pengontrol:

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

Formulir Anda secara otomatis dimasukkan ke dalam $ scope sebagai objek. Itu dapat diakses melalui$scope[formName]

Di bawah ini adalah contoh yang akan bekerja dengan pengaturan asli Anda dan tanpa harus menyerahkan formulir itu sendiri sebagai parameter dalam ng-kirim.

var controller = function($scope) {

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

        }
    }

};

Contoh kerja: 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>

Di controller Anda:

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

Meskipun bukan solusi langsung untuk pertanyaan OPs, jika formulir Anda berada dalam ng-appkonteks, tetapi Anda ingin Angular mengabaikannya sama sekali, Anda bisa melakukan ini secara eksplisit menggunakan ngNonBindablearahan:

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

Hanya untuk menambah jawaban di atas,

Saya memiliki 2 tombol biasa seperti yang ditunjukkan di bawah ini. (Tanpa tipe = "kirim" di mana saja)

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

Tidak peduli berapa banyak saya mencoba, menekan enter setelah formulir itu valid , tombol "Hapus Formulir" dipanggil, membersihkan seluruh formulir.

Sebagai solusinya,

Saya harus menambahkan tombol kirim dummy yang dinonaktifkan dan disembunyikan. Dan tombol boneka ini harus berada di atas semua tombol lain seperti yang ditunjukkan di bawah ini .

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

Yah, maksud saya adalah tidak pernah mengirimkan pada Enter, jadi peretasan yang diberikan di atas berfungsi dengan baik.

Saya tahu ini adalah utas lama tapi saya pikir saya juga akan memberikan kontribusi. Solusi saya mirip dengan posting yang sudah ditandai sebagai jawaban. Beberapa pemeriksaan inline JavaScript melakukan triknya.

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

Saya tahu ini sudah larut dan dijawab, tetapi saya ingin membagikan hal-hal rapi yang saya buat. Saya membuat arahan validasi ng yang mengaitkan pengiriman formulir, lalu mengeluarkan default-default jika $ eval salah:

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

Di html Anda:

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