web-dev-qa-db-fra.com

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

J'ai mon formulaire 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 constater, le bouton est désactivé si l'entrée est vide, mais il n'est pas rétabli à activé lorsqu'il contient du texte. Comment puis-je le faire fonctionner?

formsangularjsbuttondisabled-control
170
ali

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>
329
Ben Lesh

Pour ajouter à cette réponse. Je viens de découvrir que cela se briserait également si vous utilisiez un trait d'union dans le nom de votre formulaire (Angular 1.3):

Donc, cela fonctionnera pas:

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

La réponse sélectionnée est correcte, mais une personne comme moi peut avoir des problèmes de validation asynchrone lors de l'envoi d'une requête au serveur. Le bouton n'est pas désactivé pendant le traitement de la requête. Le bouton clignote, ce qui est plutôt étrange pour les utilisateurs.

Pour annuler cela, il vous suffit de gérer $ 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>
29
Ivan Sokalskiy

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>
5
Nelul

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

1
Prashobh
<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

1
Cengkuru Michael