[MUSIC]
لقد أكملنا للتو التعلم عن النماذج المدفوعة بالقالب
بالزاوية في الدرس السابق.
كما يدعم Angular طريقة أخرى لتصميم النماذج تسمى أشكال
تفاعلية، وتستخدم الأشكال التفاعلية أسلوب البرمجة التفاعلي لدعم النماذج.
سنتحدث عن البرمجة التفاعلية لفترة وجيزة في
واحدة من الدروس اللاحقة في هذه الوحدة.
ولكن في الوقت الحالي، سنتعامل مع أشكال تفاعلية
ونرى كيف يمكننا تصميم أشكال تفاعلية بالزاوية
وما هي الميزات الفريدة للقيام بأشكال تفاعلية في الزاوية التالية.
يدعو أسلوب البرمجة التفاعلي إلى الإدارة الصريحة
للبيانات المتدفقة بين نموذج البيانات غير واجهة المستخدم
ونموذج النموذج الموجه نحو واجهة المستخدم وهذا هو النهج الذي تتخذه الأشكال التفاعلية في Angular.
الآن قد لا يكون ذلك منطقيًا بالنسبة لك في هذه اللحظة، ولكن بينما نكمل هذا
التمرين والمحاضرة، سيصبح الأمر أكثر وضوحًا لك
لماذا يناسب النهج التفاعلي تصميم الشكل في سياقات معينة.
الآن في النهج التفاعلي، نقوم بإنشاء شجرة من
كائنات التحكم في النموذج الزاوي، داخل فئة المكون.
الآن في النماذج المستندة إلى القالب التي رأيتها في وقت سابق،
نقوم بتصميم النماذج باستخدام نهج قالب HTML، لذلك
يتم وضع جميع عناصر التحكم في النموذج في هذا النموذج في قالب HTML
ونحن ندير البيانات بشكل أساسي ونحن مرتبطون
بكائن المكون الخاص بهم من خلال نموذج NG مباشرة.
في هذا النهج، سنقوم بإنشاء بنية النموذج هذه في المكون الخاص بنا
ثم ربط بنية النموذج في عناصر تحكم ثابتة في القالب الخاص بنا، لذلك
سنقوم بربط شجرة النموذج التي نقوم
بإنشائها داخل فئة المكون الخاصة بنا
بعناصر النموذج الأصلية داخل ملف القالب الخاص بنا هناك.
لذا، في هذا النهج، تتمتع فئة المكون
بإمكانية الوصول الفوري إلى كل من نموذج البيانات بالإضافة إلى بنية التحكم في النموذج، لذا
يمكننا بعد ذلك أخذ نموذج البيانات
ودفعه إلى بنية التحكم في النموذج ونأخذ المعلومات من بنية التحكم في النموذج
ثم تعيينه إلى نموذج البيانات.
لذلك يمكن تعيين نموذج البيانات القادم من النهاية الخلفية لتشكيل
هيكل التحكم الذي ينعكس في العرض من خلال هذا القالب
ويتم الجسر بينهما داخل فئة المكون عن
طريق إنشاء بنية النموذج داخل فئة المكون.
الآن، هذا لا يجعل الكثير من المعنى بالنسبة لك في هذه اللحظة، ولكن
عندما نقوم بالتمرين، سيصبح أكثر وضوحًا لك كيف
يمكن تحقيق هذا الربط بين نموذج البيانات وهيكل التحكم الثابت
داخل فئة المكون في رمز البرنامج النصي للمكونات فئة.
لذلك هذا هو المكان الذي سوف نستفيد من أنماط رد الفعل، والاختبار
والتحقق من الصحة إلى ميزة كبيرة، لذلك هذا
النهج شكل رد الفعل يدعم أنماط رد الفعل من البرمجة، كما قلت، سوف نتحدث عن
البرمجة رد الفعل أكثر قليلا في وقت لاحق في هذه الوحدة.
أيضا، حقيقة أننا إنشاء النماذج في التعليمات البرمجية
يعني أن اختبار وتقييم النماذج يصبح أسهل بكثير. من
الصعب جدًا اختبار النماذج المدفوعة بالقالب
لأن الكثير من البنية موجودة في رمز القالب، لذا
فإن النهج التفاعلي يفسح المجال بشكل أفضل لاختبار الوحدة
وكذلك للتحقق من صحة النموذج كما سنرى في وقت لاحق قليلاً في التمرين.
دعونا نفكر بإيجاز في بعض مزايا استخدام أشكال رد الفعل.
واحدة من المزايا هي أن القيم في النموذج الذي
تكون العناصر متاحة على الفور ومزامنة مع التعليمات البرمجية المجردة.
في النموذج المدفوع بالقالب، فإنه يأخذ دورة
لأي تغييرات مكتوبة القالب ليتم انعكاسها في التعليمات البرمجية الخاصة بك هناك،
ولكن في النهج التفاعلي،
يتم الحفاظ على بت التزامن والبيانات وطريقة العرض بإحكام.
ثانيا، أشكال رد الفعل، كما سبق أن ذكرت،
هي أسهل للقيام اختبار وحدة وهذا يصبح حاسما جدا
عندما كنت تصميم النسخ المتماثل زاوية معقدة جدا.
يتم دعم النماذج التفاعلية لبعض
الفئات المتوفرة لمكتبة النماذج الزاوي.
واحد منهم هو فئة FormControl التي تقوم بتقوية عنصر تحكم النموذج الفردي هو
أننا نقوم بتضمين العناصر الفردية في شكلنا ويمكننا أيضًا
من تتبع قيمة تلك الحدود والقيام بالتحقق من صحة تلك العناصر.
FormGroup مجموعة من FormControl، لذلك
عندما تريد تنظيم FormControls معا كمجموعة
ثم تعقب المعلومات حول هذه المجموعة ككل، ثم FormGroup
تمكنك من تكتل مجموعة من FormControls معا.
بالإضافة إلى ذلك، لدينا أيضًا فئة AbstractControl وهي
فئة تستند إلى التجريدية لفئات FormControl، والتي يمكن استخدامها أيضًا لصالحنا
على الرغم من
أننا نريد رؤيتها تحديدًا في التمرين لاحقًا، ولكننا سنعود لاستخدامها في وقت لاحق.
وأيضا لدينا فئة FormArray التي تمكنك من تحديد مصفوفة
مفهرسة عدديا من مثيلات AbstractControl
، مرة أخرى، كل من AbstractControl و FormArray، لن ندرس صراحة
في هذا الدرس بالذات، لكننا سنراهم لاحقًا في الدورة.
جانب آخر مثير للاهتمام من أشكال رد الفعل
هو توافر FormBuilder.
تسمح فئة FormBuilder باستخدام لإنشاء النماذج داخل شفرة TypeScript الخاصة بنا ومن
ثم تكون قادرة على ربطها مع عناصر تحكم القالب هذه هناك.
لذلك لاستخدام فئة منشئ النماذج، تقوم باستيراد منشئ النماذج من
النماذج الزاوي ثم هناك بعد ذلك يمكنك استخدام منشئ النماذج لإنشاء النموذج،
مثل إذا كنت تستخدم وفعل فئات محول النموذج
وفئات مجموعة النموذج كما رأينا في الشريحة السابقة أن الرمز هو قليلا أكثر تفصيلا.
ولكن باستخدام فئة FormBuilder، فإنه يقلل من تكرار inclitic في
التعليمات البرمجية الخاصة بك ويجعلها أكثر إحكاما لتحديد الخطوط.
سوف نستخدم فئة FormBuilder كنهج
لبناء النماذج في التمرين التالي
وهذا المثال مشتق من التمرين الذي ستقوم به مباشرة بعد هذه المحاضرة.
حتى هنا يمكنك أن ترى أننا قد بنيت نموذج، كمجموعة من
عناصر التحكم في النموذج هذه ولكل واحد منهم اسم معين وأيضا القيمة المعطاة لهم.
من خلال إنشاء نموذج النموذج في شفرة typescript الخاصة بنا،
لا تقوم تلقائيًا بملء نموذج النموذج، بل تحتاج إلى ملء
نموذج النموذج حصريًا خاصةً إذا حصلت على البيانات في
نموذج بيانات، فيجب تعيين نموذج البيانات في نموذج النموذج الخاص بك لملء القيم،
وبالتالي فإن النموذج ونموذج البيانات منفصلة في أشكال تفاعلية.
في النماذج المدفوعة للقالب رأيت أننا نحاول مباشرة في
كائنات البيانات من ملف القالب إلى رمزنا التجريدي.
لذلك في هذه الحالة، يتم الاحتفاظ بالنموذج ونموذج البيانات منفصلين، لذلك
ستتدفق أي تغييرات تجريها على عناصر DOM في النموذج الخاص بك إلى نموذج النموذج
ويجب عليك
أن تعكس بيانات النموذج بشكل صريح مرة أخرى إلى نموذج البيانات هذا حتى من خلال خدمة أو أي وسيلة تختارها،
لذلك يساعدنا هذا الفصل على تصميم شفرتنا بشكل أفضل، كما سنرى لاحقًا.
تتوفر طريقتان لنا لملء نموذج نموذج من نموذج البيانات.
لدينا طريقة setValue ()، والتي تمكننا من تعيين كل عنصر تحكم
نموذج لقيمة معينة من نموذج البيانات أو لدينا PatchValue ()،
والتي تمكنك من تحديث بعض عناصر التحكم فقط داخل نموذج النموذج الخاص بك.
لذلك بمجرد الحصول على نموذج البيانات من النهاية الخلفية، من نموذج البيانات،
يمكنك تصحيح القيم في نموذج النموذج الخاص بك أو تعيين القيم من نموذج
البيانات الخاص بك إلى نموذج النموذج الخاص بك، في كثير من الأحيان، سنقوم بإنشاء نموذج البيانات،
الذي يعكس بشكل معقول بنية النموذج.
في التمرين الذي يلي، سترى أن لدي نموذج بيانات
يستند إلى فئة،
والتي تعكس بشكل وثيق نموذج النموذج الذي نستخدمه داخل مثالنا هناك.
مع هذا الفهم السريع للأشكال التفاعلية، دعونا ننتقل الآن إلى التمرين
حيث سنقوم بمضاعفة شكل تفاعلي داخل تطبيقنا الزاوي وعلى
طول الطريق توحيد بعض المصطلحات
وكذلك بعض الأفكار التي قمنا باستكشافها للتو في هذا الدرس.
[ موسيقى]