Angular表单提交两次答案

【问题标题】：Angular form submitting twiceAngular表单提交两次
【发布时间】：2015-04-08 17:51:43
【问题描述】：

所以我正在使用 ng-submit 和 ng-model 使用 angular js 制作用户注册表单。问题是当用户提交表单两次时它的触发器。

我四处寻找常见的原因，但没有一个符合要求。我没有两次声明我的控制器，我的提交按钮没有任何 ng-click 事件。

这是表单代码（可能是我遗漏的问题）

<form class="form"  ng-submit="registerUser()">
    <div class="form-group row">
       <label for="user-fname">First Name</label>
       <div class="two-for-one">
          <input type="text" id="user-fname" name="user-fname" class="form-control" placeholder="first name" ng-model="userData.fname">
      </div>
      <label for="user-lname">Last Name</label>
      <div class="two-for-one">
        <input type="text" id="user-lname" name="user-lname" class="form-control" placeholder="last name" ng-model="userData.lname">
      </div>
    </div>
    <label for="email">Email</label>
    <input class="form-control" type="text" id="email" name="email" placeholder="Email" rel="popover" data-content="What’s your email address?" ng-model="userData.email">
     <label for="reg_password">Password</label>
     <input class="form-control" type="password" id="reg_password" name="reg_password" placeholder="Password" rel="popover" data-content="Please choose a password (minimum of 6 characters)" ng-model="userData.pw">
     <label for="reg_password_confirm">Confirm Password</label>
     <input class="form-control" type="password" id="reg_password_confirm" name="reg_password_confirm" placeholder="Confirm Password" rel="popover" data-content="Please confirm your password" ng-model="userData.cpw">
     <label for="mail">Want to be apart of our mailing list?</label>
     <input type="checkbox" id="mail" name="mail" value="1" ng-model="userData.mail">
     <button class="btn btn-success">Next</button>
 </form>

虽然我不认为它是这里的 js：

       $scope.userData = {
            acc_type: "user",
            mail:false,
        };
        $scope.registerUser = function() {
            loginRegsterService.registerUser($scope.userData).then(function(response){
                console.log(response);
            });
        };

最后一部分是使用http发布数据的服务。它非常标准

        this.registerUser = function(data) {
            var req = {
                method: 'POST',
                url: location.protocol + '//' + location.host + '/models/register.php',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: data
            }
            return $http(req).then(function(response) {
                return response.data;
            });
        };

感谢您的阅读和帮助！

哦，我忘了说这一切都很好，除了提交两次：\

并且 html 是有效的，除了 angular 指令。

【问题讨论】：

您可以尝试为按钮提供type=submit 吗？
@maddog 我刚刚做了，它仍然提交了两次。
提交 twise 你的意思是你输入 registerUser 函数 twise 或者它也重定向页面？
好吧，您的代码很好，因此您发布的代码无法重现该问题。我建议您添加更多代码。或者做一个演示。
plnkr.co/edit/lIhkfikpG8mR6lF10MaB?p=preview

标签： javascript angularjs html forms

【解决方案1】：

也许是因为您的标签没有指定类型属性 - 并且它被视为提交最初？参见这里：https://stackoverflow.com/a/4667996/405623?

【讨论】：

【解决方案2】：

如果您创建一个具有表单的子组件并使用 EventEmitter 向父组件发出 submit/search 事件，就会发生这种情况。然后父组件将接收您的事件和本机事件。您应该在子组件中重命名 eventEmmiter，例如：

// Child component
@Output() submitForm = new EventEmitter();
@Output() searchSomething = new EventEmitter();

而不是

@Output() submit = new EventEmitter();
@Output() search = new EventEmitter();

【讨论】：