[MUSIC]
حان الوقت للانتقال إلى المهمة الثالثة في هذه الدورة.
في هذه المهمة، كما كنت قد توقعت بالفعل،
سننظر في أشكال Angular والملاحظة.
هذا هو ما تعلمناه أنا ن هذه الوحدة معينة من الدورة.
في هذه المهمة، ستقوم بتصميم نموذج
ضمن عرض مكونات تفاصيل الطبق الذي سيمكن
المستخدمين من تقديم تعليقاتهم حول طبق معين.
سوف تستخدم نماذج تفاعلية Angular لتصميم النموذج
وستستخدم تغييرات القيمة التي يمكن ملاحظتها من
أجل بدء التحقق من صحة النموذج،
تمامًا كما فعلنا في التمرين الذي أكملته للتو
وستستخدم مكون مادة Angular جديد يسمى
Angular Material مكون المنزلق.
سيتم استخدام مكون شريط التمرير لإدخال تصنيف
للطبق من قبل الشخص الذي يقدم العد.
دعونا ننظر إلى المهام الثلاث في هذه المهمة بمزيد من التفصيل.
حتى هنا، وأنا تظهر لكم أول طبق من القائمة من
أجل توضيح لكم المهام الثلاث التي تحتاج إلى أن تكتمل في هذه المهمة.
لذلك في هذه المهمة، سنقوم بإنشاء نموذج في
قسم التعليق من مكون تفاصيل الطبق الخاص بك.
يحتوي النموذج على حقلين هنا.
حقل الاسم وحقل التعليق.
في حقل الاسم، سيتم إدخال اسم المؤلف للتعليق من قبل المستخدم.
ثم في حقل تعليقهم وهو منطقة نص،
ستسمح للمؤلف بإدخال التعليق الذي يريد إرساله.
وبالإضافة إلى ذلك، من أجل الحصول على تصنيف للطبق،
وسوف نستخدم هذا المكون المواد الزاوي يسمى المنزلق المواد الزاوي.
بالنسبة لمكون شريط التمرير هذا،
يتم توفير رابط إلى الوثائق في الموارد الإضافية.
مكون شريط التمرير هو واضح إلى حد ما لإنشاء.
بالنسبة لمكون شريط التمرير هذا، ستعرض علامات القراد مثل هذا.
لذلك يمكنك أن ترى أن لديك واحد، اثنان، ثلاثة، أربعة علامات علامة بالفعل
والخامس هو الحق تحت هذا الإبهام هنا.
لذلك وأيضا عندما تظهر عرض الإبهام،
وسوف تظهر خفض في تصنيف المحدد مثل.
لذا، يجب وضع علامة على هذا في شريحة الزاوي للمكون التي تقوم
بتضمينها في خطهم وهذا سيسمح لك بتحديد التصنيف للطبق.
لذا، هذه هي مهمتك الأولى في هذه المهمة.
مهمتك الثانية هي إضافة التحقق من صحة النموذج لهذا النموذج.
الآن يجب إنشاء هذا النموذج باستخدام الخطوط التفاعلية الزاوي
وأيضا باستخدام تغييرات القيمة التي يمكن ملاحظتها من أجل مراقبة
أي تغييرات على أي من عناصر التحكم هذه النموذج لها.
وعندما يحدث أي تغيير، يجب أن تبدأ على الفور
التحقق من صحة النموذج باستخدام تغييرات القيمة التي يمكن ملاحظتها فقط بالطريقة التي فعلناها في
التمرين الذي أكملته للتو في الدرس السابق.
الآن، التحقق من الصحة التي تحتاج إلى تنفيذها هو أن كل من الاسم
والتعليق حقول مطلوبة.
علاوة على ذلك، يجب أن يحتوي الاسم على حرفين على الأقل.
حتى إذا كنت مجرد كتابة في حرف واحد، ثم يجب أن تظهر رسالة هنا تقول،
يجب أن يكون اسم المؤلف على الأقل حرفين.
الآن إذا بالطبع، نكتب في أكثر، ثم ذلك سوف تختفي.
إذا قمت بإزالة الاسم تمامًا من الحقل،
فستعرض رسالة تقول، اسم المؤلف مطلوب.
لذلك، يجب عرض الرسالة المطلوبة هنا.
لذلك بمجرد كتابة حرفين على الأقل،
ستختفي الرسالة.
الآن لحقل التعليق أيضًا، هذا حقل مطلوب.
لذلك، تحتاج إلى كتابة ما لا يقل عن بضعة أحرف.
لا يوجد أي قيود على عدد الأحرف.
ولكن إذا لم يتم كتابة أي أحرف عند عرض رسالة هنا قائلا،
التعليق كما هو مطلوب.
إذا كان النموذج الخاص بك غير صالح حاليًا، فلن يعمل زر الإرسال.
ولكن بمجرد أن يصبح النموذج صالحًا، سيعمل زر الإرسال الخاص بك
ويجب أن يمكّنك من إرسال الخط.
لذلك، هذه هي المهمة الثانية في مهمتك.
المهمة الصعبة في مهمتك هي أنه بمجرد أن يحتوي النموذج على معلومات صحيحة،
يجب عليك عرض معاينة لما قمت بإرساله للتو في النموذج.
اسمحوا لي أن اكتب في شيء أكثر معنى هنا، بحيث
تبدو معاينة مثيرة للاهتمام.
لذلك ترى أنه بمجرد كتابة معلومات صالحة في النموذج الخاص بك،
يجب أن تظهر معاينة لما
سيبدو عليه التعليق إذا تمت إضافته إلى قائمة التعليقات تلك للطبق.
لاحظ الآن أنه في المعاينة، لم يتم عرض التاريخ بعد.
لذا، هذا شيء آخر يجب أن تضعه في اعتبارك.
إذا أصبح النموذج غير صالح، فستختفي المعاينة.
ولكن بمجرد أن يصبح النموذج صالحًا، ستظهر المعاينة مرة أخرى.
لذلك، هذا شيء يجب عليك تصميمه بشكل مناسب باستخدام قائمة ND
ثم التأكد من أن النموذج صالح قبل عرض هذه المعلومات هناك.
لذلك، هذا هو المعاينة.
الآن عندما ينقر المستخدم على زر إرسال،
ثم هناك عدد قليل من الأشياء التي تحتاج إلى القيام بها.
عندما ينقر المستخدم على زر إرسال، ثم سيتم
إضافة هذا التعليق إلى قائمة التعليقات التي لديك لهذا الطبق معين.
لذلك، اسمحوا لي أن انقر على زر إرسال وستلاحظ على الفور أن النموذج
قد تمت إضافته في قائمة التعليقات لهذا الطبق معين.
لذلك، ترى أن التعليق الأخير الذي أدخلته للتو تمت إضافته هنا.
لاحظ أيضًا أنه
تمت إضافة تاريخ النموذج إلى التعليق هنا.
لذلك من المفترض أن تأخذ القيم من نموذج النموذج
ثم نسخها إلى نموذج بيانات، ثم تدفع التعليق
إلى شعاع كائن جافا سكريبت من التعليقات لكائن الطبق.
لذلك، هذا شيء تحتاج إلى القيام به باستخدام طريقة دفع الصفيف
لصفيف كائن JavaScript.
علاوة على ذلك، يجب تكوين التاريخ تلقائيًا
وإضافته إلى نموذج البيانات هذا.
تذكر أن نموذج النموذج لا يحتوي على التاريخ، ولكن
نموذج البيانات المشتق من فئة التعليق التي قمنا بتصميمها،
يحتوي نموذج البيانات على المؤلف، والتصنيف، والتعليق والتاريخ.
لذلك، تحتاج إلى إضافة التاريخ إلى نموذج البيانات.
لذا، هذا هو المكان الذي ستستفيد فيه من
فئة تاريخ Java Script مع تحويله إلى
سلسلة ISO قبل تخزينه في حقل التاريخ لنموذج بيانات التعليق الخاص بك.
الآن لقد قدمت لك روابط لأمثلة عن كيفية
إنشاء التاريخ وكيف تقوم الكابينة بتحويل التاريخ إلى
سلسلة ISO في وثائق هذا الواجب،
وكذلك في الموارد الإضافية لهذا العنصر.
لذا، يرجى البحث عن ذلك لفهم كيف من المفترض أن
تضيف التاريخ إلى حقل التعليق هذا هناك.
وبمجرد أن يتم دفع التعليق إلى مجموعة من التعليقات،
ثم أنها سوف تنضم إلى بقية التعليقات لهذا الطبق معين.
عليك أن تتذكر أننا لا نقوم بحفظ هذا إلى جانب الخادم،
لأننا لا نملك جانب الخادم.
لذلك إذا قمت بإعادة تحميل صفحتك، فسيختفي هذا التعليق.
و هذا مقبول تماما.
في هذه المرحلة، نحن لا نحاول حفظ التغييرات على
الطبق مرة أخرى إلى الخادم من خلال خدمة الطبق لدينا.
سنفعل ذلك في واحدة من الدورات اللاحقة.
لذلك في هذه اللحظة، إذا قمت بإعادة تحميل هذه الصفحة، فإن التعليق الذي قمت بإدخاله فقط
سيختفي، ولكن هذا مقبول تمامًا.
لذا، هذه هي المهمة الثالثة في مهمتك.
بعد إكمال جميع المهام الثلاث، تأكد من أن كل شيء يعمل
بشكل صحيح قبل إرسال حل التعيين إلى نظامهم.
[ موسيقى]