如何在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中以編程方式觸發表單提交？

回答

相關問題