Eu tenho minha forma assim:
Como você pode ver, o botão será desativado se a input estiver vazia, mas não voltará a ser ativada quando contiver texto. Como posso fazer isso funcionar?
Você precisa usar o nome do seu formulário, assim como o ng-disabled: Aqui está uma demonstração no Plunker
Para adicionar a esta resposta. Eu acabei de descobrir que ele também irá quebrar se você usar um hífen em seu nome de formulário (Angular 1.3):
Então isso não vai funcionar:
Resposta selecionada está correta, mas alguém como eu, pode ter problemas com validação assíncrona com o envio de solicitação para o botão do lado do servidor – não será desativado durante o processamento da solicitação dada, então o botão pisca, o que parece muito estranho para os usuários.
Para anular isso, você só precisa lidar com o estado $ pendente do formulário:
Se você estiver usando Formulários Reativos, poderá usar isto:
Podemos criar uma diretiva simples e desativar o botão até que todos os campos obrigatórios sejam preenchidos.
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'); } }); } }; } );
Para mais informações clique aqui