ng पूरे फॉर्म के लिए चेंज जैसी कार्यक्षमता

Question

मैं अपने इनपुट फ़ील्ड में किसी भी बदलाव में जब भी पूरे फॉर्म के लिए ng-change के बराबर करना चाहता हूं।

मुझे पता है कि AngularJS 1.3 के बाद से मेरा डिबॉन्स विकल्प है लेकिन यह केवल एक इनपुट के लिए लागू होता है।

मैं एक "debounce"/"परिवर्तन पर" कार्यक्षमता की तलाश में हूं जो पूरे रूप के लिए आवेदन करेगा।

Answer 1

का ख्याल रखता है वहाँ एक अंतर्निहित नहीं है एक फॉर्म के लिए ng-change करने के लिए।

यह भी, की जरूरत नहीं जा सकता है क्योंकि अगर आप अपने दृश्य मॉडल ठीक से संगठित है, तो अपने फ़ॉर्म इनपुट संभावना एक निश्चित दायरे-सामने आ रहा संपत्ति के लिए बाध्य कर रहे हैं:

$scope.formData = {}; 

और इसमें देखें:

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

तो फिर तुम मॉडल परिवर्तन के लिए गहरे देख सकते हैं ($watch के साथ) (और तत्वों पर जो कुछ भी debounce विकल्प लागू है कि आप की जरूरत है):

$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

एक "hacky" तरीका यह है फार्म के लिए की तरह

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

इस हर निष्पादित करेंगे गंदा, वैध कुछ अपनी आवश्यकताओं पर निर्भर करता है आप कर सकते हैं एक द्रष्टा की स्थापना करके है प्रपत्र संशोधित हो जाता है, अगर आप केवल आप

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

कर सकते हैं वैध संशोधित रूप पर अपने कोड निष्पादित करने के लिए करना चाहते हैं और अगर आप केवल जब $ मान्य राज्य के रूप चरणों सिर्फ 'फार्म के लिए अपने द्रष्टा सेट करने की आवश्यकता के लिए अपने कोड निष्पादित करने के लिए चाहते हैं। मान्य $ '

अगर आप पर नजर रखने वालों के साथ अपने दायरे को प्रदूषित करना पसंद नहीं है, तो आप हमेशा फार्म का है कि एक ऑन-परिवर्तन एपीआई घटना को उजागर करता है चारों ओर एक निर्देश बना सकते हैं और आंतरिक रूप से द्रष्टा

Answer 3

एरिक सोयके टिप्पणी के अनुसार आप कीप घटना पर फॉर्म परिवर्तन की जांच को जोड़ सकते हैं।

इस तरह से आप बस builtin निर्देश एनजी-KeyUp इस्तेमाल कर सकते हैं:

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