web-dev-qa-db-fra.com

Comment désactiver le bouton d'envoi après un clic pour éviter les envois multiples dans Angularjs?

J'ai parcouru le Web, y compris plusieurs exemples de débordement de pile pour trouver une solution à la question. Pour être précis, j'ai essayé ceci:

var disableButton = function() {
  document.getElementById('<%= btnSubmit.ClientID %>').disabled = true;
}

$scope.isDisabled = false;
var someFunc = function() {
  $scope.isDisabled = true;
}
<button OnClientClick="disableButton()" type="submit">Submit</button>
<button ng-disabled="isDisabled" type="submit">Submit</button>

Ni travaillé comme annoncé. D'autres suggestions? S'il vous plaît Angular suggestions seulement. Merci.

javascripthtmlangularjs
30
rashadb

Vous étiez très proche de la réponse. La seule chose que vous avez manquée a été d'appeler la touche someFunc() à l'aide de ng-click.

L'autre problème est que, dans votre contrôleur, la fonction devrait être $scope.someFunc() et non pas var someFunc()

Exemple de travail: Votre index.html devrait ressembler à:

<html>

  <head>
    <script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="application.js"></script>
  </head>

  <body ng-app="demo" ng-controller="demoController">
          <button type="submit" ng-disabled="isDisabled" ng-click="disableButton()"> Click me to disable myself</button>
  </body>

</html>

Et votre application de contrôleur.js être comme:

angular.module('demo', [])
    .controller('demoController',function($scope){

    $scope.isDisabled = false;

    $scope.disableButton = function() {
        $scope.isDisabled = true;
    }

    });
48
Wahid Kadwaikar

Une autre méthode consiste à écrire une directive qui désactive le bouton d'envoi

    angular.module('myApp').directive('clickedDisable', function(){
    return {
        restrict: 'A',
        link: function(scope, ele, attrs){
            $(ele).click(function(){
                $(ele).attr('disabled', true);
            });
        }
    };

Et dans le HTML

    <button type="submit" clicked-disable></button>
12
Arun Ghosh

Je n’ai aimé aucune des réponses fournies car elles encombrent toutes la portée globale avec la variable isDisabled, pourquoi ne pas le faire de cette façon à la place?

<button type="submit" ng-click="disableButton($event)">Submit</button>

.

$scope.disableButton = function($event) {
    $event.currentTarget.disabled = true;
};

si vous devez soumettre un formulaire avant le désactiver.

ce code n'est pas testé

<form ng-submit="disableFormSubmitButton($event)">
    <button type="submit">Submit</button>
</form>

.

$scope.disableFormSubmitButton = function($event) {
    $($event).find('[type=submit]').prop('disabled',true);
};
5
Timo Huovinen

Essayez d'utiliser ceci:

<input type="text" ng-model="email" ng-disabled="button" required ng-init="button=true">
<a class="btn" ng-click="button=false">enable edit</a>
<a class="btn" ng-click="button=true">disable edit</a>
<a class="btn" ng-click="button=!button">toggle edit</a>

En outre, il existe différentes approches pour réaliser cette fonctionnalité, vous pouvez suivre les liens suivants, ils vous aideront sûrement.

désactivation de tous les contrôles de formulaire entre soumission et réponse du serveur

bouton de désactivation sur les appels $ http/$ q

comment effectuer une vérification sur ng-disabled

4
VikrantMore

Trouvez aussi l'exemple de travail.

[~ # ~] html [~ # ~] 

  <body ng-app="DisableButtonApp">
        <div ng-controller="MyAppCtrl">
            <button ng-click="someFunc()" ng-disabled="isDisabled" ng-model="isDisabled"type="submit">Submit</button>
        </div>
    </body>

JS: 

angular.module('DisableButtonApp', [])
    .controller('MyAppCtrl',['$scope', function($scope){
    $scope.isDisabled = false;
    $scope.someFunc = function(){
        alert("Clicked!");
        $scope.isDisabled = true;
        return false;
    };
}]);

démo

1
Ranga Reddy

Pour ce que cela vaut, vous pouvez le faire directement dans le modèle:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>

  <button ng-disabled="isDisabled" ng-click="isDisabled=true" type="submit">Submit</button> isDisabled={{isDisabled}}

</body>
1
fwiw

Pour des raisons historiques, single (ou) inside soumet le formulaire si le type n'est pas 'submit'.

Selon MDN , le bouton peut avoir un attribut de type.

<button type="button">Your button</button>

make button n'a aucun comportement par défaut.

Ici est une réponse plus détaillée.

0
irsick

Voici la réponse que j'ai eu à travailler pour mon scénario de soumission de formulaire unique:

$scope.increment = 0;
$scope.someFunc = function() {
     $scope.increment++
     if($scope.increment > 1) {
          return;
     } else {
          //do something else
   }
}

Aucune directive ou HTMl nécessaire.

0
rashadb