Javascript Girl
  1. Javascript Girl
  3. La forme AngularJS ne se soumet pas lorsque vous appuyez sur enter
Intereting Posts
Basculer Oui / NON avec plusieurs questions Diviser une chaîne par des espaces, garder les segments cités, en autorisant des citations échappées Séparation de la manipulation DOM des contrôleurs angulaires – Meilleure pratique recherchée Onupload ne fonctionne pas en Chrome et safari Affichage de plusieurs marqueurs de carte dans l'API Google Maps Bloquer la rotation des périphériques sur les pages Web mobiles Vérifiez si un site Web effectue une requête X HTTP avec javascript Comment passer la liste des objets de la vue au contrôleur MVC à l'aide de json.stringify Étendre $ scope dans Angular.js Html ouvre une URL sur une nouvelle cible et met l'accent Comment puis-je recréer cet effet d'image "ondulé"? Comment puis-je utiliser Javascript pour modifier la valeur d'une entrée cachée en fonction de l'état d'une case à cocher? La résolution de la propriété et la fonction "remplace" dans QML Combiner et minifier plusieurs fichiers CSS / JS Scraper des données générées dynamiquement par JavaScript dans un document html à l'aide de C #

La forme AngularJS ne se soumet pas lorsque vous appuyez sur enter

J'essaie d'obtenir un formulaire de connexion à soumettre lorsque l'utilisateur appuie. Le formulaire fonctionne parfaitement bien lorsque le bouton "Login" est cliqué, mais appuyez sur enter ne fonctionne pas et, en outre, provoque un comportement étrange:

  • La fonction associée par ng-submit n'est pas exécutée
  • Le message d'erreur (échec de connexion) ne s'affiche plus jamais après avoir appuyé sur enter

Voici mon balisage: 

 <form ng-submit="login()" class="login-form"> <div class="alert alert-danger" ng-class="{ 'display-hide': !showError }"> <button class="close" data-close="alert"></button> <span> Login failed </span> </div> <div class="form-group"> <label class="control-label visible-ie8 visible-ie9">Username</label> <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username" ng-model="username"/> </div> <div class="form-group"> <label class="control-label visible-ie8 visible-ie9">Password</label> <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/> </div> <div class="form-actions"> <button class="btn btn-success uppercase">Login</button> </div> </form>

Notez que j'ai essayé de remplacer <button...> par <input type="submit"...> sans succès non plus.

Le contrôleur correspondant avec la fonction login () – ressemble comme suit: 

 .controller('LoginCtrl', ['$rootScope', '$scope', ..., function LoginController ($rootScope, $scope, ...) { $scope.showError = false; $scope.login = function() { console.log("logging in"); $http({ url: $scope.apiEndpointLogin, method: 'POST', data: {'username': this.username, 'password': this.password} }).then(function(response) { $scope.showError = false; [...] }, function() { $scope.showError = true; }); }; }]);

Je cours angular v1.4.0 et j'utilise angular-ui-router v.0.2.15 pour le routage.

Merci pour toute contribution, très appréciée.

Mettez celui-ci 

  <input type="submit" class="btn btn-success uppercase" value="Login" >

au lieu de 

  <button class="btn btn-success uppercase">Login</button>

Pour le bouton de soumission de formulaire, il faut indiquer le type de soumission.

CODE DE RÉGLAGE: 

 <form class="login-form" ng-submit="login()" > <div class="alert alert-danger" ng-class="{ 'display-hide': !showError }"> <button class="close" data-close="alert"></button> <span> Login failed </span> </div> <div class="form-group"> <label class="control-label visible-ie8 visible-ie9">Username</label> <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username" ng-model="username"/> </div> <div class="form-group"> <label class="control-label visible-ie8 visible-ie9">Password</label> <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/> </div> <div class="form-actions"> <input type="submit" class="btn btn-success uppercase" > </div> </form>

Vérifiez également si votre LoginCtrl est situé au-dessus de votre formulaire DOM.

CODE DE RÉGLAGE:

Veuillez vérifier ce plongeur

Au lieu d'utiliser Button <input type ="submit" />