单击表单中的按钮会导致页面刷新

2ledvvac 于 2021-09-13 发布在 Java

关注(0)|答案(11)|浏览(389)

我有一个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";
};

JavaScript angularjs

来源：https://stackoverflow.com/questions/68502194/val-returns-empry-strings-when-i-try-to-fetch-value-of-input-in-modal

11条答案

按热度按时间

ve7v8dk21#

如果你看一看w3c规范，那么很明显你应该尝试用它来标记你的按钮元素 type='button' 当你不想让他们屈服的时候。
特别要注意的是它说的地方
未指定类型属性的按钮元素与类型属性设置为“提交”的按钮元素表示相同的内容

赞(0）回复(0）举报 2021-09-13

owfi6suc2#

您可以尝试阻止默认处理程序：
html:

<button ng-click="saveUser($event)">

js:

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}

赞(0）回复(0）举报 2021-09-13

nwo49xxi3#

您应该声明该属性 ng-submit={expression} 在你的 <form> 标签。
从NGS提交文档http://docs.angularjs.org/api/ng.directive:ngsubmit
启用将Angular 表达式绑定到onsubmit事件。
此外，它还阻止默认操作（对于表单，这意味着将请求发送到服务器并重新加载当前页面）。

赞(0）回复(0）举报 2021-09-13

kcwpcxri4#

我使用指令来防止默认行为：

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> 和所有其他标签

赞(0）回复(0）举报 2021-09-13

3yhwsihp5#

你可以留下 <button type="submit"> ，但必须删除该属性 action="" 属于 <form> .

赞(0）回复(0）举报 2021-09-13

e3bfsja26#

我想知道为什么没有人提出可能最简单的解决方案：
不要用铅笔 <form> A. <whatever ng-form> 如果没有html表单，浏览器本身就无法提交任何内容，那么imho的工作是否会更好。在使用angular时，这正是正确的行为。

赞(0）回复(0）举报 2021-09-13

syqv5f0l7#

将操作添加到表单中。 <form action="#">

赞(0）回复(0）举报 2021-09-13

iaqfqrcu8#

这个答案可能与问题没有直接关系。这仅适用于使用脚本提交表单的情况。
根据ng提交代码

var handleFormSubmission = function(event) {
  scope.$apply(function() {
    controller.$commitViewValue();
    controller.$setSubmitted();
  });

  event.preventDefault();
};

formElement[0].addEventListener('submit', handleFormSubmission);

它在表单上添加提交事件侦听器。但当通过调用form.submit（）启动submit时，将不会调用submit事件处理程序。在这种情况下，ng submit不会阻止默认操作，您必须在ng submit处理程序中自己调用preventdefault；
为了提供合理明确的答案，html表单提交算法第5项规定，如果表单未通过调用submit方法提交，则表单仅发送提交事件（这意味着如果通过按钮或其他隐式方法提交，则表单仅发送提交事件），例如，在焦点位于输入类型文本元素上时按enter键）。
请参阅onsubmit处理程序无法捕获的链接中使用submit（）提交的表单

赞(0）回复(0）举报 2021-09-13

y53ybaqx9#

第一个按钮提交表单，第二个按钮不提交表单

<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>

赞(0）回复(0）举报 2021-09-13

goqiplq210#

只需添加 FormsModule 在 imports 一系列 app.module.ts 文件，并添加 import { FormsModule } from '@angular/forms'; 在这个文件的顶部…这将起作用。

赞(0）回复(0）举报 2021-09-13

7kqas0il11#

我也有同样的问题，但gladelly我通过更改 type="submit" 到 type="button" 它成功了。

赞(0）回复(0）举报 2021-09-13