如何在AngularJS中以编程方式触发表单提交？

从Angular的文档中可以看出ngSubmit是提交表单的首选方式。所有待处理的操作都立即完成并且$submitted标志也被设置。而收听ngClick事件并不具有相同的效果。如何在AngularJS中以编程方式触发表单提交？

现在我需要提交一个表格，其中包含ngSumbit方法的所有好处。因此我需要一些方法来触发标准的提交工作流程。

我试图DOM形式submit()和它的工作，但附着范围角的形式，对象包含DOM形式的引用，因此，我需要通过jqLite访问它：

var frm = angular.element('#frmId'); 
frm.submit();

我不喜欢这在控制器代码访问DOM溶液所以我创建一个指令：

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(); 
       }; 
      } 
     } 
    }; 
}

延伸形式的对象与$submit方法。

这两种变体都不能工作，原因不明。 form.submit()尝试发送数据，不会阻止默认操作。

更新1
事实证明，角听单击其type="input"元素的事件。
最后我决定触发点击事件为元素：

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'); 
       }); 
      } 
     } 
    }; 
}

有没有出此功能的现成的解决方案吗？

来源

2014-12-29 Pavel Voronin

你是如何在HTML表单结合正常的表单提交？ –

只需在表单元素上使用事件.triggerHandler（'submit'）。

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); 
       } 
      }) 
     } 
    }; 
}]);

看http://jsfiddle.net/84bodm5p/

来源

2016-06-26 12:28:06 non4me

您可以修改您的指示的代码有点像：

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}); 
        }); 
       }; 
      } 
     } 
    }; 
}

在这里，您不必添加wu-submit无处不在。 ng-submit将工作。

希望这会有所帮助！

来源

2014-12-29 14:00:31

nope ..问题不在调用相同的处理程序。问题在于如何在进行实际提交时执行所有操作。 –

您的意思是执行验证和所有说“执行所有操作”？ –

@ShashankAgrwal是的 –

angular.module('myapp.directive').directive("form", ['$parse', function($parse){ 
    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>

然后在控制器调用

$scope.myForm.doSubmit();

来源

2017-02-19 16:02:10

如何在AngularJS中以编程方式触发表单提交？

回答

相关问题