Отключить кнопку отправки, если форма недействительна с помощью функции AngularJS

У меня есть моя форма:

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

Как вы можете видеть, кнопка отключена, если вход пуст, но при включении текста он не возвращается обратно к разрешенному. Как я могу заставить его работать?

Ответы

Ответ 1

Вам нужно использовать имя вашей формы, а также ng-disabled: Вот демо на Plunker

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

Ответ 2

Чтобы добавить к этому ответу. Я только узнал, что он также сломается, если вы используете дефис в имени своей формы (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>

Ответ 3

Выбранный ответ правильный, но у кого-то вроде меня могут возникнуть проблемы с асинхронной проверкой с отправкой запроса на серверную кнопку - кнопка не будет отключена во время обработки заданного запроса, поэтому кнопка будет мигать, что выглядит довольно странно для пользователей.

Чтобы удалить это, вам просто нужно обработать $pending state формы:

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

Ответ 4

Мы можем создать простую директиву и отключить кнопку до тех пор, пока не будут заполнены все обязательные поля.

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

Для получения дополнительной информации нажмите здесь

Ответ 5

Если вы используете Reactive Forms, вы можете использовать это:

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

Ответ 6

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