Question

我正在尝试在AngularJS应用程序中以正常方式提交表单但我遇到了一个问题：似乎我必须指定action属性。

根据HTML规范（http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm）：

如果action是空字符串，则让action为文档的地址表格文件。

但是如果未填充action属性，AngularJS将拒绝提交表单。我找到的解决方法是使用action =“＃”但这不是一个可接受的解决方案，因为我可能会使用哈希，我不希望它被重写。

有没有人遇到过这个问题？

编辑：我不想对这个表单使用angular，我只是想以“旧”方式提交

Answer 1

我创建了一个小指令来解决这个问题：

.directive('form', ['$location', function($location) {
    return {
        restrict:'E',
        priority: 999,
        compile: function() {
            return {
                pre: function(scope, element, attrs){
                    if (attrs.noaction === '') return;
                    if (attrs.action === undefined || attrs.action === ''){
                        attrs.action = $location.absUrl();
                    }
                }
            }
        }
    }
}]);

似乎对我有好处。它查找动作为空的表单，并将其设置为当前URL。

实际上，它没有设置动作 - 它设置attr值，所以实际的form指令认为它有一个。

@Reimund的

更新很好 - 我实际上也必须这样做。

新更新 - 我添加了向表单元素添加noaction属性的选项;这使您可以返回“正常”角度情况。否则，如果使用ajax，该指令将提交表单两次。

Answer 2

在库中，您可以看到Angular在没有操作的情况下收听表单的事件submit：https://github.com/angular/angular.js/blob/b9fa5c5a6781f4e1ec337f27d55c69db491a6555/src/ng/directive/form.js#L331

你可以评论这一行，它有效，但我不反对编辑图书馆的代码。

之后几行，您可以看到Angular正在侦听事件$destroy，从而可以删除此事件的操作。

因此，为避免修改Angular，您只需触发表单的此事件：

angular.element(document).ready(function(){
    angular.element(document.querySelector("#loginForm")).triggerHandler("$destroy")‌; 
});

上面几行描述了这种行为的原因：

我们不能使用jq事件，因为如果在提交期间销毁了某个表单，则不会阻止默认操作。

相关问题是：https://github.com/angular/angular.js/issues/1238

Answer 3

您可以使用ng-submit。

表格

<form name="test" action="" ng-submit="submit()">
  What's your name? <input ng-model="name" /><br />
  <button>Send</button>
</form>
<br />
My name is: {{name}}

JS

var app = angular.module('App', []);
app.controller('AppCtrl', function($scope) {
  $scope.submit = function() {
    $scope.name = $scope.name + ' Doe';
  }
});

Plunker http://plnkr.co/edit/rqAwxWmozrzwwj4oAU5k?p=preview

Answer 4

通常我只需使用ng-click处理程序创建按钮。

 <button ng-click="Generate()">Submit</button><br>

带有angularJS的表单上的空操作属性

4 个答案: