带有 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 的 jqLite 版本: 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 的表单上的空动作属性的主要内容,如果未能解决你的问题,请参考以下文章
Req.Body 是 Angular 2 表单提交 + Bodyparser 上的空对象
带有 Blazor InputFile 组件的“无法读取属性 '_blazorFilesById' 的空错误”