[MUSIC]
الآن بعد أن كان لدينا مقدمة سريعة للتحقق من صحة النموذج التفاعلي في
المحاضرة السابقة، دعونا ننتقل إلى التمرين التالي حيث يمكننا
تطبيق التحقق من صحة النموذج على النموذج التفاعلي الذي أنشأه في التمرين السابق.
حتى الذهاب إلى ملف typescript مكون الاتصال لدينا،
دعونا نضيف في التحقق من صحة النموذج إلى كل من هذه الخصائص داخل نموذج النموذج الخاص بنا.
لذلك بالنسبة للاسم الأول أود أن أقول داخل المصفوفة، المدققين.
مطلوب, وبالمثل سوف
أطبق نفسه على, اسم العائلة.
ثم البريد الإلكتروني، وأيضا لtelnum، لذلك بالنسبة
للtelnum أود أن أقول للثلاثة المتبقية يمكنني تركها مفتوحة،
لأنني أتفق مع إما أن تكون خاطئة أو صحيحة ومنحهم قيم أخرى.
نظرًا لأنه تبديل طفيف ويمكن أن يأخذ نوع الاتصال واحدًا فقط
من القيم الثلاث والقيمة الافتراضية المعطاة بالفعل هناك،
وبالنسبة للرسالة، يمكننا جعلها غير قيمة مطلوبة.
إذا كان المستخدم لا يريد كتابة التعليقات،
فيمكنك السماح لهم بعدم كتابة التعليقات، ولكن إذا كنت تريد ذلك،
يمكنك إضافة أدوات التحقق. Required حتى بالنسبة للرسالة.
بالإضافة إلى ذلك، عند إعادة تعيين النموذج في طريقة onSubmit هنا
يمكنك أيضًا إعادة تعيين النموذج إلى قيمته الأولية كما حددناه
في الطريقة التي أنشأنا فيها النموذج.
لذلك داخل قيمة إعادة الضبط، فإنه يأخذ كائن كمعلمة هنا.
سيتم استخدام هذا الكائن بواسطة طريقة إعادة الضبط
من خلال استخدام طريقة القيمة المحددة التي رأيناها في المحاضرة سابقًا لإعادة تعيين
النموذج إلى الحالة كما كان عند إنشائه في الأصل.
لذلك، هنا يمكننا توفير
المعلمات مثل الاسم الأول: ''،
اسم العائلة: ''، telnum: 0،
ثم البريد الإلكتروني: ''،
توافق: false،
الاتصال: 'لا شيء'،
رسالة: ''})؛.
لذا فإن هذه القيم التي قمنا بتوفيرها في
كائن جافا سكريبت هذا التي نعطينا المعلمة
لطريقة إعادة الضبط سيكون لها نفس القيم تمامًا كما رأينا
لهذه الخصائص عندما أنشأنا نموذج التعليقات هذا.
نحن بحاجة أيضا إلى إعادة تعيين النموذج تماما في القالب.
لذلك للقيام بذلك، للعودة إلى الاستيراد هنا،
وبعد ذلك سنقوم أيضًا باستيراد viewChild} من '@angular /core'؛.
سيمكننا هذا من الوصول إلى
أي من عناصر dom الطفل داخل القالب الخاص بي.
حتى بعد القيام بذلك، القادمة إلى التعليمات البرمجية،
وهنا في كونتاكتكومبوننت، أستطيع أن أقول @ViewChild،
وبعد ذلك سوف تكون قادرة على الإشارة إلى فيدباكفورم من خلال
إعطائها متغير قالب مع اسم ففورم.
سوف تفعل ذلك في الخطوة التالية، وبعد ذلك لهذا،
سوف أشير إلى هذا باستخدام FeedBackFormDirective.
لذلك هذا يمكننا من الوصول إلى نموذج القالب ومن ثم إعادة تعيينه تماما
، بحيث يتم إعادة تعيين النموذج نفسه مرة أخرى إلى قيمته البكر.
لذلك هذه خطوة إضافية أخرى نحتاج إلى القيام بها لضمان
إعادة تعيين النموذج بالكامل إلى قيمته الأولية هنا.
الآن بعد أن فعلت ذلك في طريقة onObject، بعد إعادة تعيين
كائن فيدباكفورم نفسه هنا، ونحن بحاجة أيضا إلى إضافة
في هذا.FeedbackFormDirective.ResetForm ()؛
في هناك.
لذلك هذا سيضمن أن يتم إعادة تعيين FeedBackForm الخاص بي بالكامل إلى
قيمته البكر في هذه المرحلة.
حتى بعد هذه التغييرات دعونا نذهب الآن إلى
ملف قالب لدينا لإظهار كيف يمكننا أن تعكس هذه
الأخطاء في قالب لدينا لنموذج لدينا هناك.
لذلك، التبديل إلى ملف القالب.
لذا أولاً، سنذهب إلى الزر هنا،
ثم سنجعل الزر معطل.
إذا كان «FeedbackForm غير صالح».
لذلك سيتم تمكين الزر فقط عندما يكون FeedbackForm صالحًا.
الانتقال إلى هذا النموذج اسمحوا لي أن أضيف في
<mat-error * nGIF = «feedbackform.Get» الحصول على
('firstname') .hasError ('مطلوب')
&&
Feedbackform.get ('firstname')
.touch»، والرسالة مطلوبة الاسم الأول.
لذلك ستكون هذه هي الرسالة التي تقوم بتعيينها باستخدام سطر واحد مع المخفية،
مع هذه المعلومات هناك.
اسمحوا لي أن أطبق نفس الشيء على اسم العائلة
ورقم الهاتف والبريد الإلكتروني.
لذلك أنا مجرد الذهاب إلى نسخ، ولصق، وتحريرها،
حتى تتمكن من المضي قدما مع تلك، و («اسم العائلة»).
الاسم الأخير (
تيلنوم)
لذلك أطبق ذلك على («تلنوم»).
مرة أخرى، نفس الفكرة وراء ذلك ومن ثم أيضا إلى البريد الإلكتروني.
( 'البريد الإلكتروني').
دعونا نضيف في متغير القالب يسمى fform إلى النموذج.
لذلك اكتب #fform = «نغفورم».
الذهاب إلى نموذجنا في المتصفح، واسمحوا لي أن اكتب في الاسم الأول،
وترى أنه حتى لو قمت بحذف القيمة ستظل خضراء،
لأننا استخدمنا لمس هناك.
ولكن في اللحظة التي أبتعد عنها عندها
ستتمكن من رؤية ذلك يصبح لونًا أحمر.
لذلك بالمثل بالنسبة للاسم الأخير سترى أنه عند
إزالة قيمة الاسم الأخير، ثم يتم عرض ذلك هناك بالمثل.
اسمحوا لي أن اكتب في الاسم الأول واسم العائلة، وللبريد الإلكتروني أيضا.
ال, نفس الحالة لرقم الهاتف أيضا.
لذلك مثل هذا، يمكنك القيام التحقق من صحة النموذج في طلبنا.
مع هذا، ونحن استكمال هذا التمرين حيث
أضفنا في التحقق من صحة النموذج إلى نموذج رد الفعل لدينا.
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الرسالة،
أشكال رد الفعل الجزء الثاني.
[ موسيقى]