angularjs - 防止提交时默认 :- Angularjs

Question

如果填写表单时电子邮件为空，我想防止 http-post 到“/signUp”的默认操作。

Controller 代码:-

$scope.signUp = function() {

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

}

html( Jade ):-

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

Answer 1

当你为表单指定了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() 函数，您可以在其中继续向后端/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
    }
    ...
}