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

时间:2022-11-24 19:02:18

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,我想在用户按下回车键时提交。所以我制作了一个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.form is 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:问题很明显:是的,通过on-enter指令调用controller.submit()函数。但是,表单不会收到我的按钮正在侦听的提交事件。

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”属性。这些功能需要返回一个承诺。

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?

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

2 个解决方案

#1


10  

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

aikoven的答案中的$解析似乎对我没有用,所以我修改它以使用范围。$ eval代替。我还添加了表单。$ setSubmitted()以便表单在您提交后正确获取.ng提交的类。

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

#2


9  

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

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

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-submit expression by calling $scope.myForm.$submit($scope) from the controller.

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

#1


10  

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

aikoven的答案中的$解析似乎对我没有用,所以我修改它以使用范围。$ eval代替。我还添加了表单。$ setSubmitted()以便表单在您提交后正确获取.ng提交的类。

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

#2


9  

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

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

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-submit expression by calling $scope.myForm.$submit($scope) from the controller.

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