ปิดใช้งานปุ่มส่งเมื่อแบบฟอร์มไม่ถูกต้องกับ AngularJS

ฉันมีแบบฟอร์มของฉันเช่นนี้:

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

อย่างที่คุณอาจเห็นปุ่มถูกปิดใช้งานหากอินพุตว่างเปล่า แต่จะไม่เปลี่ยนกลับเป็นเปิดใช้งานเมื่อมีข้อความ ฉันจะทำให้มันทำงานได้อย่างไร

คุณต้องใช้ชื่อของแบบฟอร์มของคุณรวมถึง ng-disabled: นี่คือตัวอย่างของ Plunker

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

เพื่อเพิ่มคำตอบนี้ ฉันเพิ่งพบว่ามันจะพังถ้าคุณใช้ยัติภังค์ในชื่อแบบฟอร์มของคุณ (Angular 1.3):

ดังนั้นสิ่งนี้จะไม่ทำงาน:

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

การตอบสนองที่เลือกนั้นถูกต้อง แต่บางคนอย่างฉันอาจมีปัญหากับการตรวจสอบความถูกต้องแบบ async กับการส่งคำขอไปยังเซิร์ฟเวอร์ - ปุ่ม - จะไม่ถูกปิดใช้งานในระหว่างการประมวลผลคำขอที่กำหนดดังนั้นปุ่มจะกะพริบซึ่งดูแปลกสำหรับผู้ใช้

หากต้องการเป็นโมฆะคุณต้องจัดการกับ $ รอสถานะของแบบฟอร์ม:

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

หากคุณใช้แบบฟอร์มตอบโต้คุณสามารถใช้สิ่งนี้:

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

เราสามารถสร้างคำสั่งง่าย ๆ และปิดการใช้งานปุ่มจนกว่าฟิลด์บังคับทั้งหมด

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

สำหรับข้อมูลเพิ่มเติมคลิกที่นี่

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

หากคุณต้องการเข้มงวดมากขึ้น