Вимкнути кнопку надсилання, коли форма недійсна за допомогою 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>

Щоб додати до цієї відповіді. Щойно я з’ясував, що він також зламається, якщо ви будете використовувати дефіс у назві форми (кутовий 1.3):

Тож це не вийде :

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

Вибрана відповідь правильна, але у когось, як я, можуть виникнути проблеми з перевіркою асинхронізації при надсиланні запиту на сторону сервера - кнопка не буде відключена під час обробки запиту, тому кнопка блиматиме, що виглядає досить дивно для користувачів.

Щоб скасувати це, вам просто потрібно обробити $ очікуваний стан форми:

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

Якщо ти хочеш бути трохи суворішим