Question

我用Angular.js写了一个表单，要求在提交之前填写一个字段。验证工作正常（当我提交表单时，该字段显示验证错误）但表单似乎仍然执行其ng-click操作。

尽管有验证错误，是否应该提交角度表单？如果存在验证错误，阻止其提交的最佳方法是什么？

以下是相关表格：

<form role="form">
    <div class="form-group">
        <label>Book Id</label><br> 
        <input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text">
    </div>
    <button type="submit" ng-click="sendBookUpdate(BookToSend)">Send Book Update</button>
</form>

Answer 1

当存在验证错误时，Angular不会阻止表单提交。

实际上，使用您粘贴的代码段，只显示错误，因为默认情况下，错误验证是通过html5提供的。

您应该查看文档：{{3}}

基本上你必须为你的表格命名：

<form name="myForm" role="form">

然后您可以阻止您的表单在控制器内提交：

$scope.sendBookUpdate(BookToSend, form) {
  if (form.$invalid) {
    return; // and add any error to the view if you want
  }

  ...
}

另一种选择是阻止从视图提交：

<form name="myForm" role="form" ng-submit="myForm.$valid && sendBookUpdate(BookToSend)">

Answer 2

您可以禁用该按钮，直到表单包含有效数据

<button type="submit" data-ng-disabled="form.$invalid">Send Book Update</button>

Answer 3

编辑：

当我写下面的答案时，我假设ngClick与角度使用的任何表单提交处理程序完全分开。然而，我错了，如下面的评论所示。尽管不准确，但我仍然保持这个答案，告诉那些来到这里的人有同样的误解，因为至少对我来说，这样做是违反直觉的。单击double作为提交处理程序。

ng-click与表单的提交处理程序是分开的，并且每次单击该按钮时都会运行，无论它是否通过了验证检查。

您的问题的解决方案是采用sendBookUpdate（BookToSend），并将其放在表单本身的ng-submit属性中。请参阅以下代码：

<form role="form" ng-submit="sendBookUpdate(BookToSend)">
    <div class="form-group">
        <label>Book Id</label><br> 
        <input ng-model="bookToSend.bookId" class="form-control" maxlength="40" required type="text">
    </div>
    <button type="submit">Send Book Update</button>
</form>

如果有帮助，请告诉我。

编辑：

这里有关于ngSubmit的更多信息：

https://docs.angularjs.org/api/ng/directive/ngSubmit

尽管验证错误，仍然提交角度表单

3 个答案: