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

Eu tenho meu formulário como este:

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

Como você pode ver, o botão será desativado se a entrada 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 e o ng-disabled: Aqui está uma demonstração do Plunker

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

Para adicionar a esta resposta. Acabei de descobrir que ele também será quebrado se você usar um hífen no nome do seu formulário (Angular 1.3):

Portanto, isso não vai funcionar:

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

A resposta selecionada está correta, mas alguém como eu pode ter problemas com a validação assíncrona com o envio de solicitação para o lado do servidor - o botão não será desativado durante o processamento da solicitação, portanto o botão piscará, o que parece bastante estranho para os usuários.

Para anular isso, você só precisa manipular o estado $ pendente do formulário:

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

Se você estiver usando Formulários Reativos, poderá usar este:

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

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

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

Se você quer ser um pouco mais rigoroso