(change) बनाम (ngModelChange) Angular में: 2024 में क्या चुनें?

परिचय: यह विषय Stack Overflow पर क्यों छाया रहता है?

\n\n

यदि आपने कभी Angular में लिखा है और <input> में परिवर्तनों को संभालने का सामना किया है, तो आपने निश्चित रूप से दो समान इवेंट देखे होंगे: (change) और (ngModelChange)। पहली नज़र में - ये एक ही हैं। व्यवहार में - शैतान विवरण में छिपा है। प्रश्न "(change) बनाम (ngModelChange) in Angular" Stack Overflow पर हज़ारों व्यूज़ इकट्ठा करता है, और यह व्यर्थ नहीं है: गलत चुनाव बग, सर्वर पर अनावश्यक अनुरोध और नींद हराम रातों की ओर ले जाता है।

\n\n

इस लेख में PythonLib पर हम एक बार और हमेशा के लिए समझेंगे:

\n

\n
• Angular में (change) और (ngModelChange) में क्या अंतर है?
\n
• प्रत्येक का उपयोग कब करें?
\n
• सामान्य गलतियों से कैसे बचें?
\n

\n

चलिए शुरू करते हैं! 🚀

\n\n

संक्षेप में: (change) और (ngModelChange) क्या हैं?

\n\n

(change) - यह एक मानक DOM-इवेंट है, जो तब ट्रिगर होता है जब कोई एलिमेंट फोकस खो देता है (blur) और उसका मान बदल गया हो। Angular बस नेटिव change को रैप करता है।

\n\n

(ngModelChange) - यह ngModel डायरेक्टिव का इवेंट है। यह हर बार ट्रिगर होता है जब मॉडल बदलता है - वस्तुतः हर कीप्रेस पर (यदि ngModelOptions का उपयोग नहीं किया गया है)।

\n\n

महत्वपूर्ण: ngModelChange का उपयोग [(ngModel)] के बिना नहीं किया जा सकता। यह द्वि-दिशात्मक बाइंडिंग का हिस्सा है।

\n\n

अंतर देखने के लिए यहाँ TypeScript में एक न्यूनतम उदाहरण है:

\n\n

// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [ngModel]="name"\n      (ngModelChange)="onNgModelChange($event)"\n      (change)="onChange($event)"\n      placeholder="नाम दर्ज करें">\n    <p>मान: {{ name }}</p>\n  `\n})\nexport class AppComponent {\n  name = '';\n\n  onNgModelChange(value: string) {\n    console.log('ngModelChange:', value);\n  }\n\n  onChange(event: Event) {\n    console.log('change:', (event.target as HTMLInputElement).value);\n  }\n}\n

\n\n

"Angular" टाइप करने का प्रयास करें - और आप देखेंगे: ngModelChange 7 बार ट्रिगर होगा (प्रति अक्षर), जबकि change केवल एक बार, जब आप फ़ील्ड के बाहर क्लिक करेंगे।

\n\n

मुख्य अंतर: तुलना तालिका

\n\n

स्पष्टता के लिए, यहाँ (change) बनाम (ngModelChange) के प्रमुख अंतरों की तालिका है:

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

मापदंड	(change)	(ngModelChange)
इवेंट का प्रकार	नेटिव DOM-इवेंट	Angular इवेंट (EventEmitter)
कब ट्रिगर होता है	फोकस खोने पर + मान में परिवर्तन	मॉडल में प्रत्येक परिवर्तन पर (प्रत्येक इनपुट)
$event में मान	Event ऑब्जेक्ट (value निकालना आवश्यक)	मॉडल का नया मान (स्ट्रिंग, संख्या, आदि)
ngModel पर निर्भरता	आवश्यक नहीं (किसी भी input पर हो सकता है)	[(ngModel)] या [ngModel] की आवश्यकता है
प्रदर्शन	उच्च (शायद ही कभी ट्रिगर होता है)	बार-बार हो सकता है (प्रत्येक keypress पर)
फॉर्म के साथ उपयोग	रिएक्टिव फॉर्म, template-driven	केवल template-driven फॉर्म

\n\n

(change) का उपयोग कब करें?

\n\n

(change) - आपकी पसंद है, यदि:

\n

\n
• आपको केवल तब प्रतिक्रिया देनी है जब फ़ील्ड