Vô hiệu hóa nút gửi khi biểu mẫu không hợp lệ với AngularJS

Tôi có hình thức của tôi như thế này:

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

Như bạn có thể thấy, nút bị vô hiệu hóa nếu đầu vào trống nhưng nó không thay đổi trở lại thành bật khi nó chứa văn bản. Làm thế nào tôi có thể làm cho nó hoạt động?

Bạn cần sử dụng tên của biểu mẫu của mình, cũng như ng-vô hiệu hóa: Đây là bản demo trên Plunker

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

Để thêm vào câu trả lời này. Tôi chỉ phát hiện ra rằng nó cũng sẽ bị hỏng nếu bạn sử dụng dấu gạch nối trong tên biểu mẫu của bạn (Angular 1.3):

Vì vậy, điều này sẽ không hoạt động:

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

Phản hồi được chọn là chính xác, nhưng ai đó như tôi, có thể gặp sự cố với xác thực không đồng bộ khi gửi yêu cầu đến phía máy chủ - nút sẽ không bị vô hiệu hóa trong quá trình xử lý yêu cầu đã cho, do đó nút sẽ nhấp nháy, trông khá lạ đối với người dùng.

Để vô hiệu hóa điều này, bạn chỉ cần xử lý trạng thái $ chờ xử lý của biểu mẫu:

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

Nếu bạn đang sử dụng Biểu mẫu phản ứng, bạn có thể sử dụng:

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

Chúng ta có thể tạo một lệnh đơn giản và vô hiệu hóa nút cho đến khi tất cả các trường bắt buộc được điền.

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

Để biết thêm thông tin bấm vào đây

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

Nếu bạn muốn nghiêm khắc hơn một chút