AngularJS: appelez l'événement ng-submit en dehors du formulaire
je suis un poisson à AngularJS et j'ai ce scénario.
<form>
<input type="text">
</form>
<button type="submit">submit</button>
de manière normale AngularJS fournit la directive ng-submit pour fonctionner comme un attribut dans la forme mais je dois l'appeler à l'extérieur.
donc, quelqu'un a connu le même problème? Si oui, qu'avez-vous fait?
10 réponses
s'il vous plaît, entourez votre code avec un contrôleur ng, et utilisez ng-click sur les boutons hors de portée de
utilisez l'attribut form de HTML5, voici un exemple:
angular.module('app', [])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.submitted = false;
$scope.confirm = function() {
$scope.submitted = true;
};
}]);form {
padding:5px;
border: 1px solid black
}<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
<form id="myform" ng-submit="confirm()">
<label for="myinput">My Input</label>
<input type="text" id="myinput" name="myinput">
</form>
<br>
<input type="submit" value="Submit" form="myform">
<p ng-show="submitted">
The form was submitted
</p>
</body>
</html>C'est de loin la solution la plus propre que j'ai trouvé, tous les crédits vont à @Offereins https://stackoverflow.com/a/23456905/3819736
<form ng-submit="vm.submit()">
<input type="text" name="name" />
<input type="submit" id="submit-form" class="hidden" />
</form>
<label for="submit-form">
<button type="submit">submit</button>
</label>
cette méthode ne nécessite pas de contrôleur supplémentaire js ou autres ajustements jQuery.
angulaire 2
pour tous ceux qui cherchent à obtenir la même chose avec Angular 2, ngForm expose un émetteur d'événement que vous pouvez utiliser.
https://angular.io/api/forms/NgForm
<form role="form" (ngSubmit)="onSubmit()" #myForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input autofocus type="text" ngControl="name" #name="ngForm" class="form-control" id="name" placeholder="Name">
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
Name is required
</div>
</div>
</form>
<button type="submit" class="btn btn-primary" (click)="myForm.ngSubmit.emit()">Add</button>
vous pouvez également effectuer la même émission à partir de l'intérieur de votre fichier ts/js composante
Voici mon code d'essai. Le contrôleur qui a la méthode login est déjà appelé!
<form ng-submit="login()" id="form-test" name="formTest">
<input type="text" name="username">
<br>
<input type="password" name="userpass">
<br>
<!-- works -->
<input type="submit" value="submit inside" id="test">
</form>
<!-- change the path from /#/login to /?username=aaa&userpass=aaa#/login and reloads the page-->
<button type="submit" onclick="$('#form-test').submit();">submit outside (jquery)</button>
<!-- doesn't work -->
<button type="submit" ng-click="formTest.submit()">submit outside (ng-click)</button>
toutes les grandes réponses, mais l'uber-solution, avec toutes vos options exposées: http://plnkr.co/edit/VWH1gVXjP2W9T9esnVZP?p=preview
<form ng-submit="submit()" name="jForm" id="jForm" onsubmit="event.returnValue = false; return false;">
<input type="text" class="form-control" placeholder="try to hit the enter key in here" />
<div class="btn btn-default" id="tap">
Tap me
</div>
<div ui-submit="" class="btn btn-primary">Submit form</div>
</form>
<ui-submitform class="btn btn-primary" formsubmitfunction="submit()">Submit form 2</ui-submitform>
<button onclick="$('#jForm').submit()">jquery Submit</button>
et prolongeant les @ m-k et peignant des idées de @joaozito-polo:
app.directive('uiSubmitform', function()
{
// need this to make sure that you can submit your form by simply pressing the enter key in one of the input fields
return {
restrict: 'E',
link: function(scope, element, attrs)
{
element.onTrigger(function()
{
//scope.$apply(attrs.formsubmitfunction);
scope.$eval(attrs.formsubmitfunction);
});
}
};
});
réponse Courte Regardez http://jsfiddle.net/84bodm5p/
la façon la plus facile pour moi de créer une directive spéciale pour la soumission externe.
Important n'utiliser que le bon événement .triggerHandler ('submit') sur l'élément de formulaire
$scope.$on('makeSubmit', function(event, data){
if(data.formName === $attr.name) {
$timeout(function() {
$el.triggerHandler('submit'); //<<< This is Important
//equivalent with native event
//$el[0].dispatchEvent(new Event('submit'))
}, 0, false);
}
})
regardez ma réponse ici Comment déclencher le formulaire soumettre programmatically en AngularJS?
si vous cherchez une poignée de l'état de forme soumis: Dans la fonction ng-cliquez juste ajouter vm.nomformulaire.$setSubmitted ();
ng-click="vm.formName.$setSubmitted(); vm.submit()"
il y a une solution qui fonctionne pour moi:
http://jsbin.com/ODaFaGU/3/edit
consultez les parties 2 et 3.
il y a deux solutions à l'intérieur.
un pour les boutons soumettre de formulaire régulier - il vous permet de taper sur les boutons sans délai, mais garantit également que la pression de la touche "entrée" dans l'un des champs de formulaire déclenchera un soumettre.
deuxièmement, il y a un eventHandler supplémentaire qui combine les événements click, tap et keydown[enter] en un seul - cela garantit que vous pouvez frapper vos commandes aussi bien avec le clavier, comme avec un clic sur le bureau, et un robinet sur les appareils mobiles(sans frapper l'événement click deux fois).
si vous avez un problème avec ceci, donnez-moi un commentaire, je vais le corriger.
en angulaire vous ne soumettez pas de formulaires (bien, au moins de la manière angulaire). Vous avez juste besoin d'une fonction qui va faire ce que vous voulez faire quand vous remplissez le formulaire.
appelez cette fonction dans votre <button> et vous êtes prêt à partir.
exemple: plunker "151970920