Nonaktifkan tombol kirim ketika formulir tidak valid dengan AngularJS

Saya memiliki formulir saya seperti ini:

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button disabled="{{ myForm.$invalid }}">Save</button>
</form>

Seperti yang Anda lihat, tombol dinonaktifkan jika input kosong tetapi tidak berubah kembali menjadi diaktifkan ketika berisi teks. Bagaimana saya bisa membuatnya bekerja?

Anda harus menggunakan nama formulir Anda, dan juga non -aktif: Ini demo di Plunker

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="myForm.$invalid">Save</button>
</form>

Untuk menambah jawaban ini. Saya baru tahu bahwa itu juga akan rusak jika Anda menggunakan tanda hubung dalam nama formulir Anda (Angular 1.3):

Jadi ini tidak akan berfungsi:

<form name="my-form">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="my-form.$invalid">Save</button>
</form>

Respons yang dipilih sudah benar, tetapi seseorang seperti saya, mungkin memiliki masalah dengan validasi async dengan mengirim permintaan ke sisi server - tombol tidak akan dinonaktifkan selama pemrosesan permintaan yang diberikan, sehingga tombol akan berkedip, yang terlihat cukup aneh bagi pengguna.

Untuk membatalkan ini, Anda hanya perlu menangani bentuk $ pending dari formulir:

<form name="myForm">
  <input name="myText" type="text" ng-model="mytext" required />
  <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>

Jika Anda menggunakan Formulir Reaktif, Anda dapat menggunakan ini:

<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>

Kami dapat membuat arahan sederhana dan menonaktifkan tombol sampai semua bidang wajib diisi.

angular.module('sampleapp').directive('disableBtn',
function() {
 return {
  restrict : 'A',
  link : function(scope, element, attrs) {
   var $el = $(element);
   var submitBtn = $el.find('button[type="submit"]');
   var _name = attrs.name;
   scope.$watch(_name + '.$valid', function(val) {
    if (val) {
     submitBtn.removeAttr('disabled');
    } else {
     submitBtn.attr('disabled', 'disabled');
    }
   });
  }
 };
}
);

Untuk Info Lebih Lanjut klik di sini

<form name="myForm">
        <input name="myText" type="text" ng-model="mytext" required/>
        <button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
</form>

Jika Anda ingin sedikit lebih ketat