ng整個表單的類似ngChange的功能

Question

每當其中一個輸入字段發生變化時，我想爲整個表單做一個等效的ng-change。

我知道，自從AngularJS 1.3我有debounce選項，但它只適用於單個輸入。

我正在尋找適用於整個表單的「debounce」/「on change」功能。

Answer 1

沒有內置的API，在做表格的方式做ng-change。

它甚至有可能不會是必要的，因爲如果你妥善安排您的視圖模型，然後你的表單輸入可能勢必在一定範圍暴露特性：

$scope.formData = {}; 

，並在視圖：

<form name="form1"> 
    <input ng-model="formData.a"> 
    <input ng-model="formData.b"> 
</form> 

然後，你可以深手錶（帶$watch）爲模型的變化（並應用​​任何反跳選項上的元素，你需要）：

$scope.$watch("formData", function(){ 
    console.log("something has changed"); 
}, true); 

然後問題是，當然，這是一個深入觀察，它是昂貴的。此外，它不僅對錶格中的更改作出反應，而且還對來自任何來源的formData進行更改。

因此，作爲替代方案，您可以創建自己的指令來補充表單並對錶單的更改事件做出反應。

.directive("formOnChange", function($parse){ 
    return { 
    require: "form", 
    link: function(scope, element, attrs){ 
     var cb = $parse(attrs.formOnChange); 
     element.on("change", function(){ 
      cb(scope); 
     }); 
    } 
    } 
}); 

和用法是：

<form name="form1" form-on-change="doSomething()"> 
    <input ng-model="formData.a"> 
    <input ng-model="formData.b"> 
</form> 

plunker用於說明。

注意的是，「改變」事件僅在模糊的文本輸入解僱，按照jQuery documentation:

的change事件時發送到一個元素的值發生變化。此事件限於<input>元素，<textarea>框和<select>元素。對於選擇框，複選框和單選按鈕，當用戶使用鼠標進行選擇時，會立即觸發事件，但對於其他元素類型，事件將被推遲直到元素失去焦點。

Answer 2

一個「哈克」的方式來做到這一點是一個觀察者設置形式髒，有效的根據您的要求，你可以這樣做

$scope.$watch('form.$dirty',function(v){ 
     if(!v){return} 
     form.$setPristine() 
     /*do something here*/ 
    }) 

這將執行每次的形式被修改，如果你只希望有效改進形式對執行代碼，你可以做

 if(!v || form.$invalid){return} 

，如果你只希望在表格步驟$有效狀態只需要設置您的觀察者對「的形式來執行你的代碼。$有效'

如果你不喜歡用觀察者污染你的範圍，你總是可以創建一個指令來圍繞表單顯示一個on-change api事件，並在內部照顧觀察者

Answer 3

根據Eric Soyke的評論，您可以勾選keyup事件中窗體更改的檢查。

這種方式，你可以簡單地使用內置的指令NG-KEYUP：

<form name="form1" ng-keyup="doSomething()">