Désactiver le bouton d'envoi lorsque le formulaire n'est pas valide avec AngularJS

J'ai ma forme comme ceci:

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

Comme vous pouvez le voir, le bouton est désactivé si l'entrée est vide, mais il ne redevient pas activé lorsqu'il contient du texte. Comment puis-je le faire fonctionner?

Vous devez utiliser le nom de votre formulaire, ainsi que ng-disabled: voici une démo sur Plunker

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

Pour ajouter à cette réponse. Je viens de découvrir qu'il se décomposera également si vous utilisez un trait d'union dans votre nom de formulaire (Angular 1.3):

Donc, cela ne fonctionnera pas :

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

La réponse sélectionnée est correcte, mais quelqu'un comme moi peut avoir des problèmes avec la validation asynchrone avec l'envoi de la demande au côté serveur - le bouton ne sera pas désactivé pendant le traitement de la demande, donc le bouton clignotera, ce qui semble assez étrange pour les utilisateurs.

Pour annuler cela, il vous suffit de gérer $ état en attente du formulaire:

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

Si vous utilisez des formulaires réactifs, vous pouvez utiliser ceci:

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

Nous pouvons créer une directive simple et désactiver le bouton jusqu'à ce que tous les champs obligatoires soient remplis.

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

Pour plus d'informations, cliquez ici

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

Si vous voulez être un peu plus strict