尽管存在验证错误，但仍提交 Angular 表单

Question

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

尽管有验证错误，是否应该提交 Angular 表单？如果出现验证错误，防止其提交的最佳方法是什么？

这是有问题的表格：

<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 不会阻止表单提交。

实际上使用您粘贴的 sn-p，显示错误只是因为默认情况下，html5 提供了错误验证。

您应该查看文档：https://docs.angularjs.org/guide/forms

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

<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 与 Angular 使用的任何表单提交处理程序完全分开。但是，我错了，如下面的 cmets 所示。尽管这个答案不准确，但我会保持这个答案，以告知那些与我有同样误解的人，因为至少对我来说，将 ng-click 双重作为提交处理程序有点违反直觉.

---

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