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

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

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

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

 

Чтобы добавить к этому ответу. Я только узнал, что он также сломается, если вы используете дефис в своем имени формы (Angular 1.3):

Так что это не сработает:

 

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

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

 

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

  

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

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

Для дополнительной информации щелкните здесь

 
Interesting Posts
Давайте будем гением компьютера.