Desativar o botão de envio quando o formulário é inválido com o AngularJS

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