javascript 如何使用 AngularJS 以编程方式提交表单

How to programmatically submit a form with AngularJS

提问by Kevin Renskers

I've made a directive for a special type of submit button that watches when its form is submitted, and then that buttons is disabled and gets a nice animated progress bar.

我为一种特殊类型的提交按钮制定了一个指令，该按钮在提交表单时进行监视，然后该按钮被禁用并获得一个漂亮的动画进度条。

This all works fine when the form is submitted by pressing the submit button or pressing enter in one of the fields, the onsubmit handler is called just fine.

当通过按提交按钮或在其中一个字段中按 Enter 提交表单时，这一切正常，onsubmit 处理程序被调用就好了。

The problem: in one of my forms I have a textarea which I want to submit when the user presses the enter key. So I made an onEnter directive that just looks for the right key press and then executes a function.

问题：在我的一个表单中，我有一个 textarea，我想在用户按下 Enter 键时提交它。所以我做了一个 onEnter 指令，它只是寻找正确的按键，然后执行一个函数。

<form name="form" ng-submit="controller.submit()">
    <textarea ng-model="controller.newMessage.content" 
      autofocus on-enter="controller.submit()"></textarea>
    <progress-button type="submit">Post</progress-button>
</form>

The problem of course is that this doesn't trigger the onsubmit handler, and thus the button isn't disabled or anything. How could I solve this? I've tried something like document.form.submit(), but that submits the form in the old fashioned HTML way, of course bypassing all Angular / JS code and handlers. Should I find the submit button and simulate a click? That feels very hackish too.

问题当然是这不会触发 onsubmit 处理程序，因此按钮没有被禁用或任何东西。我怎么能解决这个问题？我试过类似的东西document.form.submit()，但它以老式的 HTML 方式提交表单，当然绕过所有 Angular/JS 代码和处理程序。我应该找到提交按钮并模拟点击吗？这感觉也很hackish。

Sadly $scope.formis very useless, nothing there to submit it.

可悲的$scope.form是非常无用，没有什么可以提交的。

Edit 1: Just so the problem is clear: yes, the controller.submit() function is called just fine via the on-enter directive. However, the form doesn't get a submit event which my button is listening for.

编辑 1： 问题很清楚：是的，controller.submit() 函数通过 on-enter 指令被调用得很好。但是，表单没有收到我的按钮正在侦听的提交事件。

Edit 2: Here is a gist with my button directive. The button currently needs a "pb-click"attribute, or its form needs a "pb-submit"attribute. Those functions need to return a promise.

编辑 2：这是我的按钮指令的要点。按钮当前需要一个"pb-click"属性，或者它的表单需要一个"pb-submit"属性。这些函数需要返回一个promise。

Moving this logic to a scope variable that's set from these functions might not be a big deal since that means we can use standard ng-clickand ng-submit, don't need to return promises, etc. On the other hand, if you have 5 buttons on one page you then need to create 5 scope variables. Not the best idea either. Or keep using pb-clickand for forms use a scope variable?

将此逻辑移动到从这些函数设置的范围变量可能没什么大不了的，因为这意味着我们可以使用标准ng-click和ng-submit，不需要返回承诺等。另一方面，如果您在一个页面上有 5 个按钮然后您需要创建 5 个范围变量。也不是最好的主意。还是继续使用pb-click并且为表单使用范围变量？

回答by AJ Richardson

The $parsein aikoven's answer didn't seem to be working for me, so I modified it to use scope.$evalinstead. I also added form.$setSubmitted()so the form properly gets the .ng-submittedclass after you submit it.

将$parse在aikoven的回答似乎没有要对我来说有效，所以我修改了它使用scope.$eval来代替。我还添加form.$setSubmitted()了表单，以便.ng-submitted在您提交表单后正确获取该类。

app.directive('form', function() {
    return {
        require: 'form',
        restrict: 'E',
        link: function(scope, elem, attrs, form) {
            form.$submit = function() {
                form.$setSubmitted();
                scope.$eval(attrs.ngSubmit);
            };
        }
    };
});

回答by aikoven

I've managed to achieve this by adding $submitmethod to FormController:

我已经通过向$submitFormController添加方法来实现这一点：

module.directive('form', function($parse) {
    return {
       require: 'form',
       restrict: 'E',
       link: function(scope, element, attrs, formController) {          
           formController.$submit = $parse(attrs.ngSubmit);
       }
    };
});

You can then invoke form's ng-submitexpression by calling $scope.myForm.$submit($scope)from the controller.

然后您可以ng-submit通过$scope.myForm.$submit($scope)从控制器调用来调用表单的表达式。