Comment déclencher le formulaire soumettre programmatically dans AngularJS?
D'après la documentation D'Angular, il s'ensuit que ngSubmit est une façon privilégiée de soumettre un formulaire. Toutes les opérations en cours sont immédiatement terminées et le drapeau $submitted est également activé. Alors que l'écoute de ngClick l'événement n'a pas le même effet.
maintenant je dois soumettre un formulaire avec hotkeys ayant tous les goodies de ngSubmit approche. Par conséquent, j'ai besoin d'un moyen de déclencher le flux de travail standard submit.
j'ai essayé submit() sur la forme DOM et il a fonctionné, mais la forme de l'objet d'angular attaché à la portée ne contient aucune référence à la forme DOM, donc je dois y accéder par jqLite:
var frm = angular.element('#frmId');
frm.submit();
Je n'ai pas aimé cette solution pour accéder au DOM dans le code du contrôleur donc j'ai créé une directive:
function wuSubmit() {
return {
require: 'form',
restrict: 'A',
link: function(scope, element, attributes) {
var scope = element.scope();
if (attributes.name && scope[attributes.name]) {
scope[attributes.name].$submit = function() {
element[0].submit();
};
}
}
};
}
qui étend la forme objet avec la méthode $submit .
les deux variantes ne fonctionnent pas pour une raison encore inconnue. form.submit() tente d'envoyer des données, l'action par défaut n'est pas empêché.
mise à Jour de 1
Il s'avère que L'écoute angulaire pour Cliquer des événements d'éléments ayant type="input" .
Finalement j'ai décidé de déclencher l'événement de clic pour cet élément:
wuSubmit.$inject = ['$timeout'];
function wuSubmit($timeout) {
return {
require: 'form',
restrict: 'A',
link: function (scope, element, attributes) {
var submitElement = element.find('[type="submit"]').first();
if (attributes.name && scope[attributes.name]) {
scope[attributes.name].$submit = submit;
}
function submit() {
$timeout(function() {
submitElement.trigger('click');
});
}
}
};
}
y a-t-il une solution hors de la boîte pour cette fonctionnalité?
3 réponses
il suffit d'utiliser l'événement .triggerHandler('submit') sur l'élément de formulaire.
myApp.directive("extSubmit", ['$timeout',function($timeout){
return {
link: function($scope, $el, $attr) {
$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 http://jsfiddle.net/84bodm5p /
app.directive("form", function(){
return {
require: 'form',
restrict: 'E',
link: function(scope, elem, attrs, form) {
form.doSubmit = function() {
form.$setSubmitted();
return scope.$eval(attrs.ngSubmit);
};
}
};
});
Html:
<form name="myForm" ng-submit="$ctrl.submit()" novalidate>
puis appelez le contrôleur
$scope.myForm.doSubmit();
vous pouvez modifier votre code de directive un peu comme:
function wuSubmit() {
return {
require: 'form',
restrict: 'A',
link: function(scope, element, attributes) {
var scope = element.scope();
if (attributes.name && scope[attributes.name]) {
scope[attributes.name].$submit = function() {
// Parse the handler of submit & execute that.
var fn = $parse(attr.ngSubmit);
$scope.$apply(function() {
fn($scope, {$event: e});
});
};
}
}
};
}
Ici, vous n'avez pas à ajouter wu-submit partout. ng-submit marchera.
Espérons que cette aide!