盡管驗證錯誤，仍然提交角度表單

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)">

Answer 2

您可以禁用該按鈕，直到表單包含有效數據

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

Answer 3

編輯：

當我寫下面的答案時，我假設ngClick與角度使用的任何表單提交處理程序完全分開。 然而，我錯了，如下面的評論所示。 我會保持這個答案，盡管它不准確，告訴那些來到這里的人有同樣的誤解，因為，至少對我來說，將ng-click 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