empêcher plusieurs soumissions de formulaire à l'aide de angular.js - désactiver le bouton de formulaire
Je veux éviter que plusieurs soumissions de formulaire à l'aide de angular.js. La question est liée à ce question.
Lorsque l'utilisateur clique sur un formulaire bouton envoyer la valeur de l'étiquette du bouton de soumission doit changer "chargement..", le statut du bouton sera désactivé ET l'événement de soumission doit être déclenchée de façon normale, conduisant à soumettre un appel vers le serveur. De cette manière l'utilisateur de voir l'effet suivant:
- Immédiatement: Le bouton soumettre les changements de la valeur de "chargement ..." et obtient désactivée
- Dès que le serveur répond: l'utilisateur obtient a présenté le résultat de la demande de serveur (alors que le serveur répond soient traitées sans angulaire de l'intervention)
J'ai créé ce plunk pour montrer ce que je veux dire. Ma question se rapporte à cette ligne: elm.attr('disabled',true);
. Ce n'est pas seulement de désactiver le bouton, mais également pour éviter de propager l'événement submit. Ainsi, je reçois un bouton désactivé (résultat souhaité), mais le formulaire ne permet pas d'obtenir des soumis (indésirable).
Vous pouvez voir le changement de comportement si vous commenter /décommenter cette ligne : elm.attr('disabled',true);
Aucune idée comment faire pour changer cela?
OriginalL'auteur Thomas Kremmel | 2013-04-04
Vous devez vous connecter pour publier un commentaire.
Essayer un $timeout (angularjs fonction)
Le délai d'attente est là pour permettre au navigateur de soumettre d'abord, puis de désactiver le bouton. La fonction dans le
setTimeout
appel est placé dans le navigateur de la boucle d'événement et exécuté immédiatement après que le formulaire a été soumis. Sans elle, le bouton est désactivé trop tôt.Devrait probablement utiliser
$timeout
à la place? c'est à dire ajouter le $timeout param de la directive en fonction de l'utilisation$timeout(function(){ elm.attr('disabled',true); }, 0);
OriginalL'auteur Arun P Johny
J'ai un formulaire standard et il suffit d'utiliser angulaire dans le front-end, donc si vous avez juste besoin de prévenir un bouton en cours de cliquer deux fois alors que le serveur répond alors vous pouvez utiliser cette directive, qui est ré-utilisable et ne nécessite pas de contrôleur ou ngModel.
http://plnkr.co/edit/2aZWQSLS8s6EhO5rKnRh?p=preview
Il permet de désactiver le bouton et vous pouvez modifier le texte du bouton. Utiliser comme:
Dans sa forme actuelle, cela ne fonctionnera que si vous faites de la forme standard de présentations et de ne pas ajax présentation.
Oui c'est volontairement simplifié pour mon cas, qui a été d'intégrer un formulaire standard de soumission. Il y a un certain nombre de solutions pour la requête AJAX de ré-activer le bouton de réponse, pour générique crochets. Par exemple il y a un blog ici: blog.codebrag.com/post/57412530001/.... Comme je l'ai dit, j'ai délibérément choisi un simplifiés version standard pour les soumissions de formulaire, facile à tester, etc.
ce qui est excellent et que j'ai mis en œuvre dans mon formulaire. mais il ne permet pas aux gens de corriger les champs invalides et de la soumettre de nouveau. le bouton soumettre devient invalide pour de bon. toute réflexion sur la façon de résoudre ce problème? merci!
Je n'ai pas regardé depuis un certain temps. J'utilise généralement des requêtes ajax ces jours - c'était un héritage de l'app que j'ai fait cela pour. Si vous voulez conditionnellement désactiver le bouton, vous pouvez passer un
function
qui renvoie unboolean
en tant que paramètre à la directive. Vous pouvez faireif (!conditionFunction || conditionFunction()) {
juste avant la$timeout
. Vous devez définir unscope
paramètre appeléconditionFunction
qui est optionnel. Lorsque vous appelez, vous passez le paramètrecondition-function="myControllerFunction"
.OriginalL'auteur Matt Byrne
Il suffit d'ajouter une nouvelle propriété dans votre contrôleur
Dans votre méthode
Dans votre code html lier ng-désactivé attribut $de la portée.le traitement de la propriété pour désactiver le bouton et afficher du texte, tandis que la méthode est en cours de traitement.
OriginalL'auteur Rudy
Alternative (flexible & simple) solution (l'inspiration) : une fonction wrapper autour de la soumettre code qui définit une portée variable. Voir live exemple.
Utilisation dans le contrôleur:
en vue:
La fonction (mise en service):
OriginalL'auteur Pascal Pixel Rigaux
Une plus spenthil réponse, une variante du café script + que vous pouvez activer un bouton de retour en arrière si vous avez besoin (par exemple, lorsqu'un formulaire de validation a échoué et que vous voulez essayer à nouveau)
OriginalL'auteur arctica
J'ai fini par aller la directive route. Le suivant est utilisé à la place de ng-click et attend le passé dans la fonction de retour d'une promesse (qui restangular n'). Lorsque la promesse est résolu (la réponse est renvoyée) - il va permettre des documents à soumettre. Pourrait également ajuster ceci à ajouter/supprimer des ng-désactivé.
OriginalL'auteur spenthil
ici est le moyen simple de faire les mêmes choses avec de simples vérifications logiques, le changement de texte peut également être fait de façon similaire.
OriginalL'auteur A.T.
La méthode la plus simple et la plus courante de le faire est de compter sur
$submitted
propriété de l'objet de formulaire, comme ceci:OriginalL'auteur mpospelov
Voici une façon générale, à faire pour l'ensemble des requêtes AJAX en utilisant $http intercepteurs.
Si vous avez tous de votre REPOS itinéraires à partir de /api/puis:
À l'aide de l'intercepteur vous n'aurez pas à mettre $champ d'application.isLoading dans chaque contrôleur. L'inconvénient, c'est qu'un bouton avec ng-disabled="chargement en cours" sera bloqué lors de la requête.
OriginalL'auteur kirgol