(change) مقابل (ngModelChange) في Angular: أيهما تختار في 2024؟

مقدمة: لماذا هذا الموضوع يفجر Stack Overflow؟

\n\n

إذا كنت قد كتبت أي وقت مضى في Angular وواجهت معالجة التغييرات في <input>، فمن المؤكد أنك رأيت حدثين متشابهين: (change) و (ngModelChange). للوهلة الأولى - نفس الشيء. في الواقع - الشيطان يكمن في التفاصيل. السؤال "(change) vs (ngModelChange) in Angular" يجمع آلاف المشاهدات على Stack Overflow، وليس من دون سبب: الاختيار الخاطئ يؤدي إلى أخطاء، وطلبات زائدة للخادم، وليالٍ بلا نوم.

\n\n

في هذه المقالة على PythonLib سنوضح مرة واحدة وإلى الأبد:

\n

\n
• ما الفرق بين (change) و (ngModelChange) في Angular؟
\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) vs (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]
الأداء	عالٍ (يتم تشغيله نادرًا)	قد يكون متكررًا (عند كل ضغطة مفتاح)
الاستخدام مع النماذج	النماذج التفاعلية، النماذج المبنية على القوالب	فقط النماذج المبنية على القوالب

\n\n

متى تستخدم (change)؟

\n\n

(change) - هو اختيارك إذا:

\n

\n
• تحتاج إلى التفاعل فقط عندما يغادر المستخدم الحقل