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?
Réponses:
Vous devez utiliser le nom de votre formulaire, ainsi que ng-disabled: voici une démo sur Plunker
la source
<div ng-form="myForm"> ... stuff here .. </div>
. Bien que, si vous soumettez une valeur à partir d'entrées, en appuyant sur un bouton, je recommande fortement d' utiliser une<form/>
balise, si pour aucune autre raison que cela permet à un utilisateur d' appuyer sur [ENTRÉE] et d'envoyer le formulaire. Mais cela constitue aussi probablement une meilleure pratique en raison d'éléments tels que des problèmes d'accessibilité.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 :
la source
myForm.$invalid
devrait toujours fonctionner, donc dans votre cas, je pense que celamy_formset_name0.$invalid
devrait fonctionner.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:
la source
!myForm.$valid
qui gère également les problèmes asynchrones en attente. itnext.io/valid-and-invalid-in-angular-forms-61cfa3f2a0cdSi vous utilisez des formulaires réactifs, vous pouvez utiliser ceci:
la source
(click)
et[disabled]
ne sont pas du code AngularJS valide, et les formulaires réactifs ne font pas partie du framework AngularJS. "Angular est le nom de l'Angular d'aujourd'hui et de demain. AngularJS est le nom de toutes les versions v1.x d'Angular" angular.io/guide/ajs-quick-referenceNous pouvons créer une directive simple et désactiver le bouton jusqu'à ce que tous les champs obligatoires soient remplis.
Pour plus d'informations, cliquez ici
la source
ng-disabled
dans angular 1.x et[disabled]
angular 2 | 4.x qui sont bien mieux testées que cela ?. Deuxièmement, pourquoi avoir une directive qui est étendue à un formulaire pour désactiver un bouton imbriqué, c'est super spécifique. Une solution mal pensée IMO.Si vous voulez être un peu plus strict
la source