مع فهم موجز للنماذج التفاعلية الزاوي،
دعونا ننتقل إلى التمرين التالي.
في هذا التمرين، سنقوم ببناء
نموذج تفاعلي الزاوي في التطبيق الزاوي الذي كنا نعمل عليه حتى الآن.
على طول الطريق، سوف نعزز فهمنا للأشكال التفاعلية الزاوي.
للبدء في التمرين،
فإن الخطوة الأولى التي نحتاج إلى القيام بها هي استيراد
وحدة النماذج التفاعلية الزاوي إلى وحدة التطبيق الخاصة بنا.
لذلك، دعونا نذهب إلى وحدة التطبيق،
ومن ثم نرى أننا قد استوردت بالفعل وحدة النماذج في وقت سابق.
سنقوم أيضًا باستيراد وحدة النماذج التفاعلية الزاوي.
لذلك، سأقوم بنسخ ذلك، ولصق ذلك هنا،
ثم قم بتغيير ذلك إلى وحدة النماذج التفاعلية الزاوي.
بعد أن نفعل ذلك، نحن بحاجة أيضا إلى تضمين ذلك في الديكور لدينا.
لذلك، النزول إلى الديكور هنا،
وأنا ذاهب لاستيراد وحدة النماذج التفاعلية في الديكور.
اثنين من الوحدات الأخرى التي نحن بحاجة إلى استيراد
لنموذج لدينا هو ماتسليكتمودول، و ماتسليديتوغليمودول.
تسمح لنا وحدة التحديد باستخدام عنصر التحديد،
ويمكننا SlideToggle من استخدام تبديل الشريحة في نموذجنا.
لذلك، للقيام بذلك، سنقوم كتابة في
استيراد ماتسيلكتمودول من الزاوية/المادة/حدد،
واستيراد ماتسليديتوغليمودول من الزاوية/المادة/الشريحة التبديل،
وبعد ذلك نحن بحاجة إلى إضافتها إلى الديكور نغموديل لدينا في الواردات.
لذلك، الذهاب إلى هناك،
اسمحوا لي استيراد ماتسليكتمودول و ماتسليديتوغليمودول في هناك.
لذا، مع هذه التغييرات، أصبحت
وحدة التطبيق لدينا جاهزة الآن لتمكيننا
من استخدام وحدة النماذج التفاعلية في تطبيقنا.
في الخطوة التالية،
ما سأقوم به هو إنشاء فئة هنا تسمى ردود الفعل.
لذلك، سأقوم بإنشائه في المجلد المشترك في feedback.ts اسم الملف.
الآن، هذه هي بنية الفئة التي تمثل
نموذج البيانات المقابل لنموذج النموذج الذي
سنستخدمه في تطبيق Angular الخاص بنا.
لذلك، أنا إنشاء فئة اسمه ردود الفعل.
ضمن فئة التعليقات،
سأقوم بتضمين بعض الخصائص؛
الاسم الأول، الاسم الأخير،
ثم رقم الهاتف، Telnum، البريد الإلكتروني،
ثم أوافق على أي متغير
منطقي، خاصية منطقية، نوع الاتصال الذي هو من سلسلة النوع.
سوف يصبح أكثر وضوحا بالنسبة لك لماذا أقوم بتضمين كل
هذه عندما ننظر إلى تصميم النموذج نفسه.
تتوافق فئة التغذية المرتدة هذه مع التعليقات التي
يمكن للمستخدم تقديمها حول مطعمنا في تطبيق Angular الخاص بنا.
لذا، هذا هو السبب في إنشاء فئة التعليقات هذه.
سنقوم بتعيين هذا في نموذج النموذج في
أحد المكونات هناك، وكذلك مع ذلك،
سأقوم بتصدير ثابت وهو عبارة عن مصفوفة سلسلة تسمى
contacttype والتي كما
ذكرت عبارة عن مصفوفة سلسلة تحتوي على ثلاث سلاسل هنا،
لا شيء، Tel، والبريد الإلكتروني.
لذلك، الآن لدينا هيكل نموذج البيانات جاهز.
لذلك، في وقت لاحق عندما نقوم بتطوير جانب الخادم الخاص بنا،
سنكون قادرين على تعيين هذا إلى بيانات نقوم بتخزينها على جانب الخادم.
لذا، ضمن تطبيق Angular الخاص بنا،
يشكل هذا نموذج البيانات الذي سنستخدمه لتطبيقنا تمامًا مثل الطبق
، القائد، والترويج الذي قمنا بتطويره هذا هو فئة أخرى
تمكننا من تجميع مجموعة من الخصائص معًا في فئة هنا.
لذلك، بمجرد الانتهاء من ذلك،
دعونا المضي قدما في إنشاء نموذج رد الفعل.
سنقوم بإنشاء نموذج رد الفعل في مكون الاتصال لدينا.
لذلك، دعونا نذهب إلى ملف component.ts جهة الاتصال،
وأيضا سنقوم بتضمين
النموذج المقابل في ملف قالب مكونات الاتصال.
لذلك، في مكونات الاتصال نوع ملف البرنامج النصي،
لذلك هذا هو المكان الذي سنقوم بإعداد النموذج
لدينا كما رأينا نموذج رد الفعل بنيت
في الغالب في التعليمات البرمجية ومن ثم تعيين بعد ذلك في عناصر النموذج في ملف القالب.
لذلك، هنا أنا ذاهب لاستيراد بعض الطبقات.
سأقوم باستيراد FormBuilder،
ثم FormBuilder، والمصادقة.
سيتم استخدام المصادقة للتحقق من صحة النموذج الذي سيكون في التمرين التالي،
ولكن سأقوم باستيرادها في الوقت الحالي بالفعل.
يتم استيراد هذه من مكتبة النماذج الزاوي.
لذلك، بمجرد استيراد هذا،
سنقوم باستيراد فئة التعليقات وثابت الاتصال
من ملف التعليقات المشتركة/التعليقات
الذي أنشأنا للتو في الخطوة السابقة.
نحن بحاجة إلى هذا ضمن طلبنا.
الآن، داخل صفي هنا،
سأقوم بإعلان بعض المتغيرات تسمى FeedbackForm وهو من النوع FormGroup.
هذا هو نموذج النموذج الذي سيستضيف
نموذج رد
الفعل هنا وبعد ذلك سوف أعلن أيضا ردود فعل متغيرة من نوع ردود الفعل،
لذلك سيكون هذا نموذج البيانات المقابلة.
في وقت لاحق على هذه القيمة ردود الفعل يمكن جلبها من خادم داخل التطبيق لدينا،
وبعد ذلك أيضا سوف أعلن الاتصال كمتغير
وهو من مجموعة سلسلة الاتصال.
لأنني بحاجة إلى الاستفادة من هذا في طلبنا.
لإنشاء نموذج رد الفعل داخل منشئ،
وأود أن حقن فورمبويلدر في منشئ هنا،
وأود أن إنشاء طريقة منفصلة تسمى
كريتيفورم التي سوف استدعاء داخل منشئ،
لذلك عندما يتم بناء هذه الفئة سيتم إنشاء النموذج.
لذلك، فإن كريتيفورم يكون الأسلوب الذي سوف إنشاء النموذج الفعلي.
لذلك، اسمحوا لي أن أضيف في طريقة كريتيفورم هنا.
هذا هو مجرد راحة كنت قد قمت ببساطة
بتضمين التعليمات البرمجية مباشرة في المنشئ نفسه،
ولكن سترى أنه قد تكون هناك أسباب لماذا
قد تحتاج إلى استدعاء هذا CreateForm من مواقع أخرى.
لذلك، فمن الأفضل وضعه في طريقة منفصلة هنا.
لذلك، سأقوم بإنشاء النموذج هنا، نموذج رد الفعل،
ثم وضعه في متغير FeedBackForm الذي أعلنته في وقت سابق.
لذلك، لإنشاء النموذج،
وأنا ذاهب إلى اتخاذ مساعدة من فورمبولدر،
فب التي أعلنتها في منشئ،
ومن ثم فب يوفر طريقة تسمى المجموعة التي تسمح لي
لتحديد مجموعة، فورمغروب هنا.
لذلك، داخل هناك، الآن أنا ذاهب لبناء أجزاء من النموذج هناك.
لذلك، داخل هذه المجموعة،
الآن يمكنني تضمين عناصر تحكم النموذج المختلفة هناك.
لذلك، أود أولا وضع الاسم الأول،
ثم اسم العائلة.
لاحظ كيف أن الحقول داخل النموذج الخاص بي
تعكس عن كثب الحقول داخل فئة الملاحظات الخاصة بي.
لا يجب أن تتطابق تمامًا، ولكن إذا كانت تتطابق،
فإن نقل البيانات بين
نموذج البيانات والنماذج الأربعة يصبح أكثر وضوحًا.
Telnum الذي أنا ستعمل ترك 'السبب uh -
لقد أضفت الاسم الأول، اسم العائلة،
Telnum، البريد الإلكتروني، وأوافق، ونوع الاتصال،
والتي سوف تعيين على أنها لا شيء للبدء.
تذكر أن نوع جهة الاتصال عبارة عن مصفوفة سلسلة تحتوي على ثلاثة منها
لذا يجب عليك اختيار واحد منهم ثم تعيينه في هذه الخاصية هنا.
لذلك، سوف أختار هذا على أنه لا شيء ثم رسالة،
والتي ستكون ردود الفعل التي يقدمها المستخدم حول
مطعمنا الذي تم تعيينه في سلسلة هنا.
لذا، هذه هي المجالات المختلفة التي ستشكل جزءًا من شكلنا هنا.
لذلك، بمجرد أن يكون لدينا بنية النموذج في مكان هنا،
لذلك لاحظت أنه عندما يتم استدعاء هذه الطريقة، سيكون
هذا النموذج سيتم إنشاء النموذج التفاعلي في التعليمات البرمجية هنا.
الآن، نحن بحاجة إلى تعيين هذا في وجهة النظر،
في القالب هناك.
لذا، سنقوم بذلك في الخطوة التالية.
لذلك، الآن، انتقل إلى ملف القالب الخاص بنا،
في ملف قالب مكون الاتصال،
سنقوم بالتمرير لأسفل ثم قم بتضمين هذا في
ملف القالب الخاص بنا مباشرة بعد هذا div هنا،
لذلك لدينا هذا div في طريقة عرض الاتصال التي تحتوي على معلومات الموقع وهلم جرا.
بعد ذلك مباشرة، سأقوم بإنشاء div آخر في
داخله سنقوم باستضافة النموذج التفاعلي هناك.
اسمحوا لي أن أطبق بعض الأشياء تخطيط المرن
هنا إلى div الخاص بي.
الآن، يجب أن يكون حجم النموذج هذا كما ترون
فئة CSS سأقوم بإنشائها بعد ذلك بقليل.
داخل هذا div، سأقوم باستضافة النموذج الخاص بي.
لذلك، بمجرد أن أضع هذا div في ملف القالب الخاص بي،
اسمحوا لي الآن أن أبدأ مع عنوان لهذا.
لذا، سنقول، «أرسل لنا ملاحظاتك».
لذلك، كنت تبحث عن ردود الفعل من الزوار إلى موقعك.
سنبدأ في بناء النموذج.
لذلك، اسمحوا لي أن أبدأ مع علامة النموذج
هنا وبعد ذلك سنقوم ببناء النموذج داخل علامة النموذج هذه هنا.
لذلك، بالنسبة للنموذج، فإن أول شيء سأقوم به هو تطبيق
عدم التحقق لأنه سيتم الاعتناء بالتحقق من الصحة بواسطة الزاوي،
ثم تطبيق مجموعة نموذج هنا أيضًا.
لذا، لاحظ أن مجموعة النماذج هذه هي المجموعة التي ستربطني بنموذج النموذج
التفاعلي الذي قمت بإنشائه في شفرتي هنا.
لذلك، من خلال القيام بذلك،
نحن ربط في هذا النموذج التفاعلي في القالب إلى
نموذج النموذج المقابل في ملف typescript لدينا هناك.
لذا، فإن الطريقة التي نقوم بها هي أن نعلن عن نموذج مجموعة النموذج ونموذج التغذية المرتدة.
سوف تظهر لك كيفية ربط
عناصر النموذج المتبقية
إلى الخصائص المقابلة في نموذج النموذج في فترة قصيرة.
لذلك، بعد أن نفعل ذلك،
دعونا نضع عناصر شكلنا في مكانها داخل نموذج النموذج هذا.
لذلك، سوف أعلن P حول هنا ثم داخل هناك
سأستخدم حقل شكل الحصيرة هنا،
والذي سأطبق عليه فئة CSS تسمى نصف العرض،
وأغلق هذا.
لذلك، هذا من شأنه أن يضع أول شكل تحكم في مكانه هنا.
لذا، هنا، سأضع الإدخال ثم أطبق MatInput من المادة الزاوي هنا.
لربط هذا في الخاصية داخل نموذج النموذج الخاص بي،
سأحتاج إلى القيام فورمكونترولنام،
وأول واحد هو الاسم الأول.
لذا، بهذه الطريقة، يتم ربط هذا الإدخال الآن بخاصية الاسم الأول
التي قمت بتعريفها داخل نموذج النموذج الخاص بي الذي قمت بتعريفه في الشفرة.
الاسم الأول، ثم سأقوم بتعريف
العنصر النائب كاسم أول.
لذلك، كما تتوقع،
سيتم استخدام حقل الإدخال هذا لكتابة
الاسم الأول من قبل المستخدم، اكتب النص.
ومن المثير للاهتمام، ترى أننا لا نملك نموذج ng هنا
أو أي من متغيرات القالب وهلم جرا في شكلي بعد الآن.
أشكال رد الفعل تعمل بشكل مختلف.
لذلك، كما ترى في النماذج
التفاعلية، يمكنك تعيين مجموعة النماذج ثم حاول أسماء عنصر تحكم النموذج.
إذا كنت تقوم بإنشاء عناصر تحكم النموذج مع فئة التحكم في النموذج،
فستعلن هذا كعنصر تحكم في النموذج داخل أقواس مربعة ثم
تطابقه مع عنصر تحكم النموذج المطابق الذي تقوم بإنشائه في النوع الخاص بك متشككا.
ولكن الآن بما أننا نستخدم منشئ النماذج،
فأنا بحاجة فقط إلى التعادل في مجموعة النماذج مثل
هذا في النموذج الخاص بي إلى نموذج النموذج المقابل،
ثم بقية منهم،
أعلن كاسم عنصر تحكم النموذج ثم مطابقتها إلى
الخصائص المقابلة في
نموذج التحكم أن لدي في بلدي typescript طريقة التعليمات البرمجية.
لذلك، سيؤدي هذا إلى إنشاء حقل الاسم الأول هناك.
دعني أنسخ هذا
أحتاج إلى اسم عائلي هنا
لذا، سأقوم بنسخ هذا ثم أقول اسم عنصر التحكم في النموذج هو اسم العائلة،
والعنصر النائب هو اسم العائلة،
ومن النوع، النص، هنا.
كان لي الاسم
الأول، وكان لي اسم العائلة وإذا نظرتم إلى نموذج التحكم في النموذج،
سترى أنه بعد الاسم الأول واسم العائلة،
لدي رقم الهاتف كالرقم التالي،
لذلك سأقوم بلصق هذا هنا.
ثم، اسم عنصر تحكم النموذج هنا هو Telnum،
والعنصر النائب هو رقم الهاتف،
والنوع هو Tel.
بينما نحن في ذلك،
وسوف ربط في المطلوبة في هذه على الرغم من أن هذا ليس مطلوبا حقا.
ولكن اسمحوا لي أن أضيف ذلك هناك.
الآن، رقم الهاتف ثم لدي البريد الإلكتروني.
لذا، فإن الحقل التالي هو البريد الإلكتروني،
والعنصر النائب هو البريد الإلكتروني،
والنوع أيضًا.
لذلك، الآن لدي أولا،
اسم العائلة، ورقم الهاتف، والبريد الإلكتروني.
الشيء التالي الذي سأقوم بإضافته هو تبديل الشريحة.
في وقت سابق نستخدم مربع الاختيار.
إن slidetoggle هو عنصر تحكم آخر في شكل المادة الزاوي،
والذي يختلف إلى حد ما عن مربع الاختيار،
واعتقدت أنني سوف أوضح لك باستخدامه في النموذج هنا.
الآن، هذا هو المكان الذي سأستخدم فيه جدول لوضع هذه العناصر.
والسبب هو أن
هذه العناصر يصعب وضعها دون استخدام جدول.
لذلك، داخل الجدول،
أنا متأكد من أنك تعرف جميعا كيفية استخدام الجدول،
حاولت وضعها باستخدام
تخطيط المرن القياسية ولم تكن ناجحة جدا مع ذلك.
لذلك، بدلا من ذلك لجأت إلى استخدام جدول لوضع هذين العنصرين في النموذج الخاص بي.
لذا، تبديل الحصيرة المنزلقة.
لذا، فإن slidetoggle يشبه مربع الاختيار،
يمكنك تشغيله وإيقافه،
وهذا مسموح به لتحديد قيمة منطقية هنا.
لذلك، سليديتوغل و فورمكونترولنام توافق.
إذا كنت تتذكر، كان لدينا اتفاق،
الذي كان خاصية منطقية في عنصر تحكم النموذج.
ثم، لهذا، أود أن أقول، هل
يمكن أن نتصل بك؟
الآن، سوف تصبح أكثر وضوحا بالنسبة لك عندما ترى النسخة النهائية من
هذا النموذج لفهم سبب قيامنا بذلك.
الآن، سنضع كل الأجزاء في شكلي التفاعلي هنا
الجزء الثاني أنا ذاهب لاستخدام اختيار،
وهو مدعوم من خلال عنصر اختيار حصيرة في المواد الزاوي.
لذا، حدد MD ولهذا العنصر النائب،
سأعرّف بأنه «كيف؟» ،
و فورمكونترولنام الذي أنا ذاهب لربط هذا هو
«كونتاكتيبي» وإغلاق مد حدد.
لذلك، هذا يسمح لي بإنشاء عنصر تحديد في النموذج الخاص بي.
لذا، فإن عنصر التحديد هو شيء
يعطيني قائمة سحب يمكن من خلالها تحديد واحد منهم.
لذلك، لإنشاء القائمة المنسدلة،
سأستخدم خيار الحصيرة المتاح كمكون في المادة الزاوي.
لذلك، يتم تضمين خيار الحصيرة داخل اختيار الحصيرة.
لذلك، بالنسبة للخيار،
سأقوم بعمل* ngFor،
وأنا متأكد من أنك تتذكر التوجيه ngFor من وقت سابق،
* ngFor «السماح ctype من ContactType».
الآن، ترى لماذا أعلنت متغير نوع الاتصال في
التعليمات البرمجية الخاصة بي في وقت سابق ومن ثم أود أن أقول، [value] = «ctype».
لذا، أقوم بإعداد خياري في اختياري هنا واستخدام الاستيفاء،
سأكتب ctype هنا.
لذا، سيعطيني ذلك قائمة الخيار المنسدلة في النموذج الخاص بي هناك.
لذلك، هذا هو الجزء التالي ثم أخيرا،
بعد الجدول، وأنا ذاهب لوضع في منطقة النص هنا.
لذلك، أود أن أقول ص وإغلاق أن P. لتصميم شكل رد الفعل،
عنصر P يسمح لي لوضع العناصر بشكل صحيح.
لذلك، هذا هو السبب في أنني أستخدم ذلك.
لذا، كما تتذكر،
يسمح لي حقل شكل الحصيرة
بتضمين حاوية إدخال هنا ثم داخل هناك سأقوم بتعريف منطقة نص،
والتي أقوم بتطبيق
توجيه MatInput على ذلك.
ثم، فورمكونترولنام، وأنا ذاهب لإعطاء ك «رسالة».
لذلك، هذا العنصر شكل معين يسمح للمستخدم لكتابة
في رسالة ردود الفعل لمطعمي.
لذا، العنصر النائب «ملاحظاتك»،
ثم سأعطي مساحة النص حجم
12 صفًا هنا ثم أغلق منطقة النص.
لذلك، هنا لدينا منطقة نص مع 12 الصفوف.
لذلك، هذا يكمل معظم النموذج.
آسف، هذا يَجِبُ أَنْ يَكُونَ خارج المنضدةِ.
نحن بحاجة إلى زر لإرسال النموذج.
لذلك، هناك حق، وسوف تشمل زر من نوع = «إرسال»
وهذا الزر إرسال سوف تطبيق
زر الحصيرة وأيضا تطبيق فئة = «الخلفية الأساسية».
كنت قد رأيت لي تطبيق هذا على زر في التمرين السابق أيضا،
نوع مماثل من زر.
لذلك، الآن شكلي جاهز تقريبا.
يمكنك إضافة بعض فئات CSS إلى مكون جهة الاتصال.
الطبقات الثلاث التي استخدمتها هي عرض كامل،
ويستخدم هذا لتعيين حجم العناصر هناك.
لذلك، عرض كامل 95 في المئة، نصف العرض.
لذلك، هذا يسمح لي لحجم العناصر بشكل صحيح،
45 في المئة نصف العرض ثم حجم النموذج.
لذلك، أستخدم فئات CSS هذه في النموذج الخاص بي.
لذلك مع هذا، دعونا حفظ التغييرات،
ونلقي نظرة سريعة على النموذج في طلبنا.
الذهاب إلى المتصفح،
في طريقة عرض جهة الاتصال
، أثناء التمرير لأسفل، ترى الآن النموذج في مكانه في طريقة عرض جهة الاتصال هنا.
لذلك، ترى ترسل لنا ملاحظاتك،
الاسم الأول، الاسم الأخير، رقم الهاتف،
البريد الإلكتروني و الشريحة التبديل هنا،
لذلك ترى الشريحة التبديل في مكان هناك وبعد ذلك هذا هو هذا التحديد.
اختيار يسمح لي لاختيار واحد من هذه الثلاثة.
القيمة الافتراضية هي لا شيء ثم منطقة النص هنا،
تسمح لي بكتابة تعليقات ملاحظاتي هنا ثم زر الإرسال.
لذلك، هذا يكمل النموذج التفاعلي في
طلبي ولكن عند النقر على زر إرسال،
لن تتمكن من إرسال هذا النموذج.
لذا، نحتاج إلى إضافة ngSubmit إلى النموذج الخاص بنا في القالب
ثم إضافة طريقة في ملف البرنامج النصي الخاص بنا.
الذهاب إلى التعليمات البرمجية لدينا،
إلى النموذج هنا،
جنبا إلى جنب مع نموذج novalidate FormGroup،
وأنا ذاهب لإضافة في ngSubmit إلى النموذج.
سأستدعي الطريقة كطريقة onSubmit.
لذلك مع هذا، فإن النموذج الخاص بي جاهز الآن لتقديم المعلومات.
أحتاج إلى الذهاب إلى مكونات جهة الاتصال،
اكتب ملف البرنامج النصي ثم قم بإنشاء طريقة onSubmit هنا.
لذلك، في طريقة
onSubmit، يحدث ذلك أن نموذج النموذج هو بالضبط نفس نماذج البيانات،
حتى أتمكن ببساطة من أخذ قيمة نموذج النموذج.
لذلك، عندما يكون لديك نموذج نموذج مثل هذا النموذج ردود الفعل،
نموذج ردود الفعل يعطي خاصية تسمى القيمة،
والذي يسمح لي لاسترداد القيمة الحالية لكل هذه من نموذج ملاحظاتي.
لذلك سوف يشكل هذا كائن جافا سكريبت،
والذي يمكنني بعد ذلك تعيين في كائن جافا سكريبت ردود الفعل.
يحدث ذلك، كل من هذه لديها بالضبط نفس الهيكل،
ونموذج البيانات ونموذج النموذج.
لذلك، هذا هو السبب في أنني قادرة على تحميل بسرعة في القيمة
مباشرة في نموذج البيانات عندما يرسل المستخدم النموذج.
إذا كان نموذج البيانات الخاص بك مختلفًا إلى حد ما عن نموذج النموذج،
فستحتاج إلى التعيين في خصائص فردية بشكل صريح
ويمكن القيام بذلك داخل هذه الطريقة هناك.
فقط لتظهر لك أن النموذج يتم إرساله بشكل صحيح،
سأقوم بتسجيل القيمة إلى وحدة التحكم، وحدة تحكم جافا سكريبت.
ثم أود أن أقول، هذا. Feedbackform.Reset.
تسمح لك طريقة إعادة الضبط بإعادة تعيين النموذج إلى حالته العادية،
وإزالة كافة الإدخالات التي قمت بها في النموذج.
لذلك، بمجرد إرسال المستخدم،
يمكنك عادة التقاط القيم ثم إعادة تعيين النموذج
بحيث يمكن إجراء المزيد من المدخلات كنموذج منفصل.
لذلك هذه هي طريقة إعادة الضبط التي سنستخدمها هنا.
لذلك مع هذه التغييرات،
دعونا حفظ التغييرات ومن ثم نذهب ونرى نموذجنا في العمل.
الشيء الصغير الأخير الذي أريد إضافته إلى القالب الخاص بي هو إظهار
قيم النموذج داخل النموذج نفسه،
على الرغم من
أنك في تطبيق حقيقي، لن تقوم بذلك لكنني أردت فقط أن أوضح
لك كيف يمكنك رؤية قيم FeedBackForm مباشرة هنا،
من نموذج FeedBackForm
لذا، أنا يُمْكِنُ أَنْ أَعْملَ داخل هنا.
أستطيع أن أقول Feedbackform.Value و الأنابيب من خلال جسون لإظهار هنا.
وبالمثل، يمكنني القيام به هنا، FeedBackForm.
هناك خاصية أخرى مرتبطة بنموذج النموذج الذي يسمى الحالة،
والذي يوضح لي حالة النموذج في هذه اللحظة،
سواء كان صالحًا أو غير صالح.
لذلك، سأقوم بإضافة هذين إلى النموذج الخاص بي هنا،
بحيث يتم عرض هذا في القالب الخاص بي.
هذا فقط لإعطائك عرض فوري لما
يحتوي عليه نموذج النموذج في ملف البرنامج النصي الخاص بي.
دعونا حفظ التغييرات ونذهب ونلقي نظرة سريعة على شكلنا.
بالعودة إلى متصفحنا،
يمكنك الآن أن ترى أن قيم النموذج يتم عرضها
هنا وأن النموذج في شكل جيد لتمكيننا من كتابة القيم.
لذا دعونا نكتب بعض القيم العشوائية هنا ويمكنك أن
ترى على الفور أن القيمة تنعكس في نموذج FeedBackForm هناك،
مباشرة في الأعلى والبريد الإلكتروني.
لا يهم، فقط اكتب شيئا.
ثم، هذا التبديل التبديل،
يمكنك أن ترى أنه عند تشغيله وإيقاف تشغيله،
وتوافق بدوره يتغير من كاذبة إلى ترو.
لذلك اسمحوا لي أن أترك الأمر في صحيح ثم حدد.
اسمحوا لي أن حدد البريد الإلكتروني ثم ترى أن نوع جهة الاتصال هنا قد تغير إلى البريد الإلكتروني.
لذا، هذه هي الطريقة التي ستحدد بها لتغيير القيمة.
لذا، دعنا نقول البريد الإلكتروني ثم هنا،
يمكننا كتابة الرسالة.
بعض النص العشوائي هنا
وستتمكن من رؤية أن النص العشوائي ينعكس في الرسالة هناك.
دعونا نرسل النموذج.
لذلك، عند النقر على إرسال ترى على الفور في وحدة التحكم،
القيمة التي يتم طباعتها هنا،
في هذا الكائن هنا.
لذلك يمكنك استعراض لرؤية جميع خصائص هذا الكائن،
نموذج نموذج ردود الفعل.
لذلك، هذا هو مثال على شكل رد الفعل داخل طلبنا.
و هذا يكمل هذا التمرين.
في هذا التمرين، رأينا كيف يمكننا إنشاء
نموذج تفاعلي داخل تطبيقنا الزاوي.
هذه أيضًا نقطة جيدة يمكنك فيها إجراء التزام Git بالرسالة،
وتشكل الجزء الأول من التفاعل.