javascript - 尽管验证错误仍提交 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 不会阻止表单提交。

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

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

基本上你必须命名你的表单:

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

然后您可以使用以下方法阻止表单在 Controller 内提交:

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

  ...
}

另一个选项是阻止从 View 提交:

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