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

Posted

技术标签:

【中文标题】带有 angularJS 的表单上的空动作属性【英文标题】:Empty action attribute on a form with angularJS 【发布时间】:2013-12-02 21:40:39 【问题描述】:

我正在尝试在 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,我只想以“旧”方式提交它

【问题讨论】:

Angular.js submit form old way的可能重复 【参考方案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();
                    
                
            
        
    
]);

似乎对我有好处。它会查找 action 为空的表单,并将其设置为当前 url。

实际上,它并没有设置动作 - 它设置了 attr 值,所以实际的表单指令认为它有一个。

@Reimund 的

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

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

【讨论】:

【参考方案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

【讨论】:

这是您发布的 sn-p 的 jqLit​​e 版本: angular.element(document).ready(function() angular.element(document.querySelector("#loginForm")).triggerHandler ("$destroy"); );【参考方案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';
  
);

Plunkerhttp://plnkr.co/edit/rqAwxWmozrzwwj4oAU5k?p=preview

【讨论】:

【参考方案4】:

通常我只是用 ng-click 处理程序制作按钮。

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

【讨论】:

以上是关于带有 angularJS 的表单上的空动作属性的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS模态对话框表单对象在控制器中未定义

即使输入无效,AngularJS表单也会验证

Req.Body 是 Angular 2 表单提交 + Bodyparser 上的空对象

带有 Blazor InputFile 组件的“无法读取属性 '_blazorFilesById' 的空错误”

带有文件类型字段editAction的Symfony 3表单集合实体

带有 ListView 的导航抽屉。 ListView 上的空指针异常