我用 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>
最佳答案
出现验证错误时,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)">
关于javascript - 尽管验证错误仍提交 Angular 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24497433/