我在Angular中有一个表单,里面有两个按钮标签。一个按钮在ng-click
上提交表单。另一个按钮纯粹用于使用ng-click
进行导航。但是,当单击第二个按钮时,AngularJS会导致页面刷新,触发404.我在函数中删除了一个断点,它正在触发我的函数。如果我执行以下任何操作,它将停止:
ng-click
,该按钮不会导致页面刷新。 <a>
的锚标记(href=""
),则不会导致刷新。后者似乎是最简单的解决方法,但为什么AngularJS甚至在我的函数之后运行导致页面重新加载的任何代码?看起来像一个错误。
以下是表格:
<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
<fieldset>
<div class="control-group">
<label class="control-label" for="passwordButton">Password</label>
<div class="controls">
<button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
</div>
</div>
<div class="buttonBar">
<button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
</div>
</fieldset>
</form>
这是控制器方法:
$scope.showChangePassword = function() {
$scope.selectedLink = "changePassword";
};
答案 0 :(得分:448)
如果你看一下W3C specification,看起来很明显的事情就是当你不希望它们提交时,用type='button'
标记你的按钮元素。
特别要注意的是它所说的
未指定type属性的button元素表示与type属性设置为“submit”的button元素相同的东西
答案 1 :(得分:70)
您可以尝试阻止默认处理程序:
HTML:
<button ng-click="saveUser($event)">
JS:
$scope.saveUser = function (event) {
event.preventDefault();
// your code
}
答案 2 :(得分:18)
您应该在ng-submit={expression}
标记中声明属性<form>
。
来自ngSubmit文档 http://docs.angularjs.org/api/ng.directive:ngSubmit
启用将角度表达式绑定到onsubmit事件。
此外,它会阻止默认操作(表单意味着将请求发送到服务器并重新加载当前页面)。
答案 3 :(得分:18)
我使用指令来防止默认行为:
module.directive('preventDefault', function() {
return function(scope, element, attrs) {
angular.element(element).bind('click', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
});
然后,在html中:
<button class="secondaryButton" prevent-default>Secondary action</button>
此指令也可用于<a>
和所有其他标记
答案 4 :(得分:5)
您可以保留action=""
,但必须删除<form>
的{{1}}属性。
答案 5 :(得分:2)
我想知道为什么没有人提出可能最简单的解决方案:
不要使用
<form>
<whatever ng-form>
恕我直言更好,没有HTML表格,浏览器本身也无需提交。使用angular时,这是正确的行为。
答案 6 :(得分:1)
向表单添加操作。
<form action="#">
答案 7 :(得分:1)
这个答案可能与问题没有直接关系。这只是在您使用脚本提交表单时的情况。
var handleFormSubmission = function(event) {
scope.$apply(function() {
controller.$commitViewValue();
controller.$setSubmitted();
});
event.preventDefault();
};
formElement[0].addEventListener('submit', handleFormSubmission);
它在表单上添加了提交事件监听器。 但是,通过调用form.submit()启动提交时,不会调用提交事件处理程序。在这种情况下,ng-submit不会阻止默认操作,你必须在ng-submit处理程序中自己调用preventDefault;
为了提供合理明确的答案,HTML表单提交算法第5项规定,如果未通过调用submit方法提交表单,则表单仅调度提交事件(这意味着只有在按钮提交时才调度提交事件)或其他隐式方法,例如,当焦点在输入类型文本元素上时按Enter键。
请参阅Form submitted using submit() from a link cannot be caught by onsubmit handler
答案 8 :(得分:0)
第一个按钮提交表单,第二个按钮不
<body>
<form ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}
$scope.Dont=function()
{
$scope.v=0;
}
});
</script>
</body>
答案 9 :(得分:0)
只需将FormsModule
添加到imports
文件的app.module.ts
数组中,
并将import { FormsModule } from '@angular/forms';
添加到此文件的顶部...这将起作用。
答案 10 :(得分:0)
我也遇到了同样的问题,但是很高兴我通过将类型从type="submit"
更改为type="button"
来解决了这个问题。