爲什麼表單不提交被angularJS中的無效輸入字段阻止？

Question

我想了解angularjs中的自定義表單驗證。我跟着一個例子，它定義了一個指令，根據它是否包含'e'字符，將input文本字段設置爲有效或無效。這似乎工作，因爲CSS的樣式根據有效性而改變。但是，即使字段無效，表單仍然允許按下提交按鈕。下面的plunker顯示了一個簡單的例子。如果輸入字段無效，它將繪製紅色邊框。

Plunker：http://plnkr.co/edit/84NpBl9nmL5Qda96YF8d?p=preview

注意，如果文本字段爲空的「添加」按鈕將被禁用，這是由於required屬性，但我想要的按鈕也被禁用時，該字段爲無效。我錯過了什麼？我想我希望required意味着「有效」而不是「不空」。

Answer 1

我已經想通了怎麼做我想要的。首先，required只要求一些值存在。要驗證控件禁用提交按鈕，我需要使用ng-disabled並讓它調用一個js函數來確定狀態。

我的input字段的angular指令現在將變量設置爲true或false，以記錄是否禁用添加按鈕，並且該變量是nb-disabled測試中檢查的內容。它還會繼續呼叫$setValidity，以便css仍將該字段標記爲無效。

下面是一個新的plunker來顯示更改。我還用ng-repeat來說明如果重複中有多種形式，它將如何工作。

Plunker：http://plnkr.co/edit/HYYPvFFARL1m0WBr3WrM?p=preview

的主要變化是修改myDirective改變scope.disableAdd[]值和ng-disabled="checkDisableAdd({{$index}})"屬性提交按鈕。