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

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

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

6 Solutions collect form web for “Отключить кнопку отправки, если форма недействительна с помощью функции 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'); } }); } }; } ); 

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

 
  • jQuery: как получить, какая кнопка была нажата при отправке формы?
  • Можем ли мы использовать несколько форм на веб-странице?
  • Как установить значение входного файла при выпадающем файле на странице?
  • Предоставляет ли ASP.NET Web Forms возможность двойного щелчка?
  • В чем разница между «Запросить полезную нагрузку» и «Данные формы», как показано на вкладке «Инструменты разработчика Chrome».
  • Очистить входные значения формы JSF после отправки
  • Как написать «Html.BeginForm» в Razor
  • Возможная ошибка в ASP.NET MVC с заменой значений формы
  • Как предотвратить закрытие приложения при закрытии формы запуска?
  • Java проверяет, перекрываются ли два прямоугольника в любой точке
  • Добавление вызывает java.lang.IllegalStateException: не удается создать сеанс после того, как ответ был зафиксирован
  • Interesting Posts

    Что такое ViewModelLocator и каковы его плюсы и минусы по сравнению с DataTemplates?

    Библиотека C # Telnet

    Android Studio: Gradle: ошибка: не удается найти символьную переменную

    Каков самый простой способ обратного преобразования ArrayList?

    Что делает оператор запятой?

    Отключить горячие клавиши Windows Key при использовании Virtualbox

    Как искать слово или фразу в команде «человек» Linux и цикл через найденные решения?

    Предотвращение изменения размера изображения в Outlook 2010

    Ошибка WCF. Не удалось найти элемент конечной точки по умолчанию, который ссылается на контракт UserService.UserService.

    Инвертировать инструкцию «if» для уменьшения вложенности

    Входящие скрыты в Outlook 2010

    Могу ли я сделать виртуальную машину из физической машины Windows XP?

    Возвращает несколько значений из метода Java: почему нет объектов n-кортежей?

    Соответствие строк с помощью шаблона

    Включение AHCI заставляет BIOS висеть на POST

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