防止提交时违约: - Angularjs

时间:2013-10-28 14:40:33

标签: angularjs angularjs-directive angularjs-controller

如果填写表单时电子邮件为空,我想阻止http-post的默认操作为'/ signUp'。

控制器代码: -

$scope.signUp = function() {

  if($scope.email = null);
    preventdefault;

}

html(jade): -

form(name="input", action="/signUp", method="post")
  input(type="submit", value="submit")

1 个答案:

答案 0 :(得分:18)

如果为表单指定了action属性,angularjs将不会执行preventDefault。 如果您将其删除并添加ng-submit:

<form name="myForm" method="post" ng-submit="signUp(myForm)" novalidate>
    <input type="email" name="email" ng-model="newSignup.email" required>
    <button type="submit">sign up</button>
</form>

在这种情况下,表单将始终具有preventDefault,并且在提交时,将调用$ scope.signUp()函数,您可以在其中继续ajax发布到后端/注册或进一步验证。 请注意,通过在输入上使用适当的验证属性(如type =“email”和required),angularjs将为您执行一些基本验证。 您可以在提交按钮上添加额外ng-disabled="!myForm.$valid",以便在未正确输入电子邮件时禁用该按钮。

通过在我的示例中对输入使用ng-model,您的范围将获得一个$scope.newSignup对象,您可以在signUp()函数中检查该对象以进一步验证:

$scope.signUp = function(htmlForm) {
    if ($scope.newSignup.email !== 'some@email.com') {
       return false;  // you should really show some info to the user
    }
    ...
}