如何以编程方式提交与AngularJS的表单 [英] How to programmatically submit a form with AngularJS

问题描述

我做了一个指令，为一种特殊类型的提交按钮的表单提交时手表，然后将该按钮被禁用，并得到一个不错的动画进度条。

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.

时的形式是由pressing提交的这一切工作正常的提交按钮或pressing的领域之一进入，onsubmit处理程序被调用就好了。

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.

问题：在我的形式我有，我想，当用户presses回车键提交文本区域。所以我做了一个的OnEnter指令，只是看起来合适键preSS，然后执行的函数。

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.

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

当然，问题是，这不会触发onsubmit处理程序，因此，按钮未禁用或任何东西。我怎么能解决这个问题？我试着像 document.form.submit（），但在提交老式HTML方式的形式，当然绕过所有角/ JS code和处理程序。我应该找到提交按钮，模拟点击？这给人的感觉非常的hackish了。

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.

不幸的是 $ scope.form 很没用，什么也没有提交它。

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

编辑1：正是这样的问题是清楚的：是的，controller.submit（）函数是通过对输入指令称为就好了。然而，的形式没有得到一个提交事件，我的按钮被监听

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.

编辑2：这里是我的按键指令一个要点是：<一href=\"https://gist.github.com/kevinrenskers/d66dbebe43c8533efaf2\">https://gist.github.com/kevinrenskers/d66dbebe43c8533efaf2.按钮目前需要一个PB-单击属性，或它的形式需要一个PB-提交属性。这些功能需要退货的承诺。

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

移动这样的逻辑到的这些功能​​设置可能不是一个大问题，因为这意味着我们可以使用标准的NG-点击一个范围的变量NG-提交，不需要返回的承诺等。另一方面，如果你有一个页面上5个按钮，你则需要创建5范围的变量。不是最好的主意。或者用PB不断点击和形式的使用范围的变量？

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-click and 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-click and for forms use a scope variable?

推荐答案

我已经设法通过加入 $提交法的FormController来实现这一点：

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

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

然后可以通过调用 $ scope.myForm。$提交（$范围） NG-提交前pression code>从控制器。

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

这篇关于如何以编程方式提交与AngularJS的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！