[英]Angular form submitting twice
所以我正在使用 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 intialy? 另请参阅此处: https : //stackoverflow.com/a/4667996/405623 ?
如果您创建一个具有表单的子组件并使用 EventEmitter 向父组件发出submit
/ search
事件,则可能会发生这种情况。 然后父组件将接收您的事件和本机事件。 您应该在子组件中重命名 eventEmmiter,例如:
// Child component
@Output() submitForm = new EventEmitter();
@Output() searchSomething = new EventEmitter();
代替
@Output() submit = new EventEmitter();
@Output() search = new EventEmitter();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.