1 00:00:00,000 --> 00:00:04,735 [MUSIC] 2 00:00:04,735 --> 00:00:09,734 الآن بعد أن كان لدينا مقدمة سريعة للتحقق من صحة النموذج التفاعلي في 3 00:00:09,734 --> 00:00:14,901 المحاضرة السابقة، دعونا ننتقل إلى التمرين التالي حيث يمكننا 4 00:00:14,901 --> 00:00:20,926 تطبيق التحقق من صحة النموذج على النموذج التفاعلي الذي أنشأه في التمرين السابق. 5 00:00:20,926 --> 00:00:26,101 حتى الذهاب إلى ملف typescript مكون الاتصال لدينا، 6 00:00:26,101 --> 00:00:34,463 دعونا نضيف في التحقق من صحة النموذج إلى كل من هذه الخصائص داخل نموذج النموذج الخاص بنا. 7 00:00:34,463 --> 00:00:42,264 لذلك بالنسبة للاسم الأول أود أن أقول داخل المصفوفة، المدققين. 8 00:00:45,794 --> 00:00:50,830 مطلوب, وبالمثل سوف 9 00:00:50,830 --> 00:00:55,977 أطبق نفسه على, اسم العائلة. 10 00:00:58,032 --> 00:01:02,361 ثم البريد الإلكتروني، وأيضا لtelnum، لذلك بالنسبة 11 00:01:02,361 --> 00:01:09,030 للtelnum أود أن أقول للثلاثة المتبقية يمكنني تركها مفتوحة، 12 00:01:09,030 --> 00:01:16,066 لأنني أتفق مع إما أن تكون خاطئة أو صحيحة ومنحهم قيم أخرى. 13 00:01:16,066 --> 00:01:21,117 نظرًا لأنه تبديل طفيف ويمكن أن يأخذ نوع الاتصال واحدًا فقط 14 00:01:21,117 --> 00:01:26,166 من القيم الثلاث والقيمة الافتراضية المعطاة بالفعل هناك، 15 00:01:26,166 --> 00:01:30,470 وبالنسبة للرسالة، يمكننا جعلها غير قيمة مطلوبة. 16 00:01:30,470 --> 00:01:32,595 إذا كان المستخدم لا يريد كتابة التعليقات، 17 00:01:32,595 --> 00:01:36,030 فيمكنك السماح لهم بعدم كتابة التعليقات، ولكن إذا كنت تريد ذلك، 18 00:01:36,030 --> 00:01:39,619 يمكنك إضافة أدوات التحقق. Required حتى بالنسبة للرسالة. 19 00:01:39,619 --> 00:01:46,890 بالإضافة إلى ذلك، عند إعادة تعيين النموذج في طريقة onSubmit هنا 20 00:01:46,890 --> 00:01:52,910 يمكنك أيضًا إعادة تعيين النموذج إلى قيمته الأولية كما حددناه 21 00:01:52,910 --> 00:01:57,630 في الطريقة التي أنشأنا فيها النموذج. 22 00:01:57,630 --> 00:02:05,100 لذلك داخل قيمة إعادة الضبط، فإنه يأخذ كائن كمعلمة هنا. 23 00:02:05,100 --> 00:02:10,479 سيتم استخدام هذا الكائن بواسطة طريقة إعادة الضبط 24 00:02:10,479 --> 00:02:17,447 من خلال استخدام طريقة القيمة المحددة التي رأيناها في المحاضرة سابقًا لإعادة تعيين 25 00:02:17,447 --> 00:02:24,192 النموذج إلى الحالة كما كان عند إنشائه في الأصل. 26 00:02:24,192 --> 00:02:28,467 لذلك، هنا يمكننا توفير 27 00:02:28,467 --> 00:02:35,442 المعلمات مثل الاسم الأول: ''، 28 00:02:35,442 --> 00:02:41,745 اسم العائلة: ''، telnum: 0، 29 00:02:43,660 --> 00:02:47,219 ثم البريد الإلكتروني: ''، 30 00:02:49,160 --> 00:02:53,690 توافق: false، 31 00:02:53,690 --> 00:03:01,132 الاتصال: 'لا شيء'، 32 00:03:01,132 --> 00:03:07,940 رسالة: ''})؛. 33 00:03:07,940 --> 00:03:11,206 لذا فإن هذه القيم التي قمنا بتوفيرها في 34 00:03:14,042 --> 00:03:19,081 كائن جافا سكريبت هذا التي نعطينا المعلمة 35 00:03:19,081 --> 00:03:23,514 لطريقة إعادة الضبط سيكون لها نفس القيم تمامًا كما رأينا 36 00:03:23,514 --> 00:03:28,168 لهذه الخصائص عندما أنشأنا نموذج التعليقات هذا. 37 00:03:28,168 --> 00:03:32,325 نحن بحاجة أيضا إلى إعادة تعيين النموذج تماما في القالب. 38 00:03:32,325 --> 00:03:36,532 لذلك للقيام بذلك، للعودة إلى الاستيراد هنا، 39 00:03:36,532 --> 00:03:43,130 وبعد ذلك سنقوم أيضًا باستيراد viewChild} من '@angular /core'؛. 40 00:03:43,130 --> 00:03:45,950 سيمكننا هذا من الوصول إلى 41 00:03:45,950 --> 00:03:49,910 أي من عناصر dom الطفل داخل القالب الخاص بي. 42 00:03:49,910 --> 00:03:54,054 حتى بعد القيام بذلك، القادمة إلى التعليمات البرمجية، 43 00:03:54,054 --> 00:03:59,321 وهنا في كونتاكتكومبوننت، أستطيع أن أقول @ViewChild، 44 00:03:59,321 --> 00:04:04,250 وبعد ذلك سوف تكون قادرة على الإشارة إلى فيدباكفورم من خلال 45 00:04:04,250 --> 00:04:09,088 إعطائها متغير قالب مع اسم ففورم. 46 00:04:09,088 --> 00:04:14,698 سوف تفعل ذلك في الخطوة التالية، وبعد ذلك لهذا، 47 00:04:14,698 --> 00:04:19,770 سوف أشير إلى هذا باستخدام FeedBackFormDirective. 48 00:04:21,890 --> 00:04:27,030 لذلك هذا يمكننا من الوصول إلى نموذج القالب ومن ثم إعادة تعيينه تماما 49 00:04:27,030 --> 00:04:34,200 ، بحيث يتم إعادة تعيين النموذج نفسه مرة أخرى إلى قيمته البكر. 50 00:04:34,200 --> 00:04:38,710 لذلك هذه خطوة إضافية أخرى نحتاج إلى القيام بها لضمان 51 00:04:38,710 --> 00:04:43,470 إعادة تعيين النموذج بالكامل إلى قيمته الأولية هنا. 52 00:04:43,470 --> 00:04:50,268 الآن بعد أن فعلت ذلك في طريقة onObject، بعد إعادة تعيين 53 00:04:53,241 --> 00:04:58,669 كائن فيدباكفورم نفسه هنا، ونحن بحاجة أيضا إلى إضافة 54 00:04:58,669 --> 00:05:06,242 في هذا.FeedbackFormDirective.ResetForm ()؛ 55 00:05:08,355 --> 00:05:10,060 في هناك. 56 00:05:10,060 --> 00:05:15,045 لذلك هذا سيضمن أن يتم إعادة تعيين FeedBackForm الخاص بي بالكامل إلى 57 00:05:15,045 --> 00:05:18,400 قيمته البكر في هذه المرحلة. 58 00:05:18,400 --> 00:05:23,273 حتى بعد هذه التغييرات دعونا نذهب الآن إلى 59 00:05:23,273 --> 00:05:29,050 ملف قالب لدينا لإظهار كيف يمكننا أن تعكس هذه 60 00:05:29,050 --> 00:05:33,630 الأخطاء في قالب لدينا لنموذج لدينا هناك. 61 00:05:33,630 --> 00:05:35,730 لذلك، التبديل إلى ملف القالب. 62 00:05:35,730 --> 00:05:39,490 لذا أولاً، سنذهب إلى الزر هنا، 63 00:05:39,490 --> 00:05:44,705 ثم سنجعل الزر معطل. 64 00:05:46,924 --> 00:05:56,470 إذا كان «FeedbackForm غير صالح». 65 00:05:56,470 --> 00:06:01,280 لذلك سيتم تمكين الزر فقط عندما يكون FeedbackForm صالحًا. 66 00:06:01,280 --> 00:06:06,403 الانتقال إلى هذا النموذج اسمحوا لي أن أضيف في 67 00:06:06,403 --> 00:06:15,674 00:06:28,727 ('firstname') .hasError ('مطلوب') 69 00:06:30,484 --> 00:06:31,577 && 70 00:06:31,577 --> 00:06:40,875 Feedbackform.get ('firstname') 71 00:06:47,340 --> 00:06:54,588 .touch»، والرسالة مطلوبة الاسم الأول. 72 00:06:56,040 --> 00:07:01,070 لذلك ستكون هذه هي الرسالة التي تقوم بتعيينها باستخدام سطر واحد مع المخفية، 73 00:07:01,070 --> 00:07:02,370 مع هذه المعلومات هناك. 74 00:07:04,710 --> 00:07:11,009 اسمحوا لي أن أطبق نفس الشيء على اسم العائلة 75 00:07:15,328 --> 00:07:20,007 ورقم الهاتف والبريد الإلكتروني. 76 00:07:20,007 --> 00:07:25,736 لذلك أنا مجرد الذهاب إلى نسخ، ولصق، وتحريرها، 77 00:07:25,736 --> 00:07:32,226 حتى تتمكن من المضي قدما مع تلك، و («اسم العائلة»). 78 00:07:36,243 --> 00:07:38,472 الاسم الأخير ( 79 00:07:38,472 --> 00:07:39,714 تيلنوم) 80 00:07:39,714 --> 00:07:46,424 لذلك أطبق ذلك على («تلنوم»). 81 00:07:50,395 --> 00:07:53,948 مرة أخرى، نفس الفكرة وراء ذلك ومن ثم أيضا إلى البريد الإلكتروني. 82 00:08:01,227 --> 00:08:01,970 ( 'البريد الإلكتروني'). 83 00:08:05,976 --> 00:08:10,561 دعونا نضيف في متغير القالب يسمى fform إلى النموذج. 84 00:08:10,561 --> 00:08:16,460 لذلك اكتب #fform = «نغفورم». 85 00:08:16,460 --> 00:08:22,187 الذهاب إلى نموذجنا في المتصفح، واسمحوا لي أن اكتب في الاسم الأول، 86 00:08:22,187 --> 00:08:28,240 وترى أنه حتى لو قمت بحذف القيمة ستظل خضراء، 87 00:08:28,240 --> 00:08:31,501 لأننا استخدمنا لمس هناك. 88 00:08:31,501 --> 00:08:36,522 ولكن في اللحظة التي أبتعد عنها عندها 89 00:08:36,522 --> 00:08:42,586 ستتمكن من رؤية ذلك يصبح لونًا أحمر. 90 00:08:42,586 --> 00:08:47,659 لذلك بالمثل بالنسبة للاسم الأخير سترى أنه عند 91 00:08:47,659 --> 00:08:54,020 إزالة قيمة الاسم الأخير، ثم يتم عرض ذلك هناك بالمثل. 92 00:08:54,020 --> 00:08:57,710 اسمحوا لي أن اكتب في الاسم الأول واسم العائلة، وللبريد الإلكتروني أيضا. 93 00:08:59,736 --> 00:09:07,411 ال, نفس الحالة لرقم الهاتف أيضا. 94 00:09:07,411 --> 00:09:12,287 لذلك مثل هذا، يمكنك القيام التحقق من صحة النموذج في طلبنا. 95 00:09:12,287 --> 00:09:16,943 مع هذا، ونحن استكمال هذا التمرين حيث 96 00:09:16,943 --> 00:09:21,285 أضفنا في التحقق من صحة النموذج إلى نموذج رد الفعل لدينا. 97 00:09:21,285 --> 00:09:26,493 هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الرسالة، 98 00:09:26,493 --> 00:09:28,750 أشكال رد الفعل الجزء الثاني. 99 00:09:28,750 --> 00:09:34,925 [ موسيقى]