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

Question

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

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

问题：在我的一个表单中，我有一个文本区域，当用户按下回车键时我想提交它。所以我做了一个 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>

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

可惜$scope.form很没用，没什么可提交的。

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

编辑 2：Here is a gist with my button directive。按钮当前需要"pb-click" 属性，或者它的表单需要"pb-submit" 属性。这些函数需要返回一个承诺。

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

Answer 1

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

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

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

Answer 2

aikoven 的答案中的$parse 似乎对我不起作用，因此我将其修改为使用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);
            };
        }
    };
});