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

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提供的.

您应该查看文档: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)">