Désactiver le bouton de soumission lorsque le formulaire est invalide avec AngularJS

Question

J'ai mon formulaire comme ça :

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

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

Answer 1

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>

Answer 2

Pour compléter cette réponse. Je viens de découvrir qu'il y aura également une panne si vous utilisez un trait d'union dans le nom de votre formulaire (Angular 1.3) :

Donc cela va pas travail :

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

Answer 3

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 donnée, donc le bouton clignotera, ce qui semble assez étrange pour les utilisateurs.

Pour annuler cela, il suffit de gérer l'état d'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>

Answer 4

Si vous utilisez Reactive Forms, vous pouvez utiliser ceci :

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

Answer 5

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