لقد تعلمنا للتو عن الدعم الزاوي للنماذج،
وعلى وجه الخصوص، النموذج الذي يحركه القالب.
في هذا التمرين، سنقوم بإنشاء نموذج يستند إلى القالب ومن ثم تضمين ذلك
في حوار مكون تسجيل الدخول الذي أنشأنا في التمرين السابق.
في هذه المحاضرة،
يتيح النموذج القائم على القالب الذي نقوم بإنشائه للمستخدم كتابة اسم المستخدم وكلمة المرور الخاصة به في نموذج تسجيل الدخول،
ثم إرسال هذه المعلومات إلى طلبنا.
الآن، كيف تتم معالجة هذه المعلومات من قبل جانب الخادم،
يتم تركها إلى دورة لاحقة.
ولكن في الوقت الحالي، لدينا طريقة لالتقاط اسم المستخدم وكلمة المرور
المقدمة من قبل المستخدم من خلال نموذج يستند إلى قالب تسجيل الدخول،
والتي سنقوم بتصميمها في هذا التمرين.
الشروع في التمرين،
فإن الخطوة الأولى لتكون قادرة على الاستفادة
من استخدام النماذج التي يحركها القالب هي الذهاب إلى
ملف module.ts التطبيق ومن ثم استيراد بعض الوحدات الداعمة لتطبيقنا.
لذا، فإن أول شيء سأقوم باستيراده هو
MatformFieldModule من
حقل نموذج المادة الزاوي.
لذلك، وهذا يمكننا من تجميع معا مجموعة من العناصر في حقل نموذج هناك.
ثم، سنقوم أيضا استيراد ماتينبوتمودول.
تدعم وحدة الإدخال مكون الإدخال وهو
مكون مادة الزاوي منمق
يدعم حقل نموذج الإدخال من نماذج HTML هنا.
ثم، أيضا، اسمحوا لي استيراد MatcheckBox،
وحدة المقابلة من مربع الاختيار مادة الزاوي.
لذلك، هذه الثلاثة تدعم
ثلاثة عناصر النموذج التي سنستخدمها عندما ننشئ تطبيقنا.
تمكننا وحدة حقل النموذج من تجميع مجموعة من عناصر النموذج هناك.
وحدة الإدخال تمكننا من إنشاء حقل الإدخال هناك.
وحدة مربع الاختيار، كما تتوقع،
تمكننا من إنشاء مربع اختيار.
بالإضافة إلى ذلك، أحتاج أيضًا إلى استيراد
FormsModule من أشكال Angular.
FormsModule هو الذي يدعم النماذج في Angular.
هذا هو الذي يدعم النماذج التي يحركها القالب.
لذلك، الآن بعد أن قمنا باستيراد هذه، من الواضح أن
الخطوة التالية هي الذهاب إلى الديكور نغمودول ومن ثم سحب هذه في مكانها هنا.
لذلك، سنذهب هنا ثم إدخال FormsModule.
اسمحوا لي إدخال فورمفيلدمودول،
إنبوتمودول، تشيكبوكسمودول في هنا.
ثم، الآن وحدة التطبيق الخاصة بي جاهزة
لدعم استخدام النماذج التي تعتمد على القالب في تطبيقنا.
الآن بعد أن أكملنا هذا،
دعونا نذهب إلى مكون تسجيل الدخول.
الكثير من عملنا هو في عنصر تسجيل الدخول.
اسمحوا لي أولا تصميم النموذج.
لذلك، الذهاب إلى ملف قالب مكون تسجيل الدخول،
اسمحوا لي أن أضيف في القالب لنموذج لدينا لإنشاء النموذج هنا.
لذلك، في الجزء العلوي،
سأقوم بإنشاء p
الذي سيعرض المعلومات التي كتبتها في النموذج.
في التعليمات البرمجية، سيكون لدينا متغير جافا سكريبت يسمى المستخدم،
والتي سيتم ربطها في الحقول في هذا النموذج.
الآن، عندما نخلق ذلك،
ثم سوف تصبح أكثر وضوحا.
الآن، هنا، من خلال تضمين هذا،
ما أقوم بتمكينه هو إظهار التغييرات.
كما نكتب في المعلومات في النموذج،
التغييرات المقابلة التي تحدث في التعليمات البرمجية
لتعكس حالة النموذج يمكن أن تظهر هناك حق.
الآن، بالإضافة إلى ذلك، الآن سأقوم بإنشاء النموذج هنا.
لذلك، سوف ندخل ثم نضيف عنصر النموذج هنا.
إلى عنصر النموذج هذا،
سأقوم بتطبيق
سمة novalidate هنا لأننا
نريد التحقق من صحة النموذج من قبل Angular وليس من خلال
التحقق من صحة نموذج HTML القياسي
الذي يدعمه المتصفح.
لذلك، سنقوم بتحويل تلك المسؤولية إلى تطبيقنا الزاوي نفسه.
لذلك، لهذا السبب أحدد سمة novalidate لهاتفي.
لذلك، هذا يخلق النموذج الخاص بي هنا. في
الداخل هنا، سأستخدم محتوى حوار الحصيرة.
الآن، محتوى حوار الحصيرة، كما تتوقع،
هو منطقة تحتوي على محتوى الحوار نفسه.
لذلك، هذا هو السبب في وضعنا هذا المحتوى الحصيرة الحوار في هنا.
ثم، هنا، أنا ذاهب إلى إنشاء النموذج الخاص بي هنا.
لذا، وَضعتُ a p هناك.
داخل هذا p، سأستخدم حقل شكل الحصير هنا.
لذا، فإن حقل شكل الحصيرة يمكّنني من تجميع مجموعة
من العناصر ذات الصلة بالنموذج التي أستخدمها معًا.
لذلك، هنا، سأضع المدخلات هنا.
لذلك، حقل نموذج الإدخال من أشكال ملف HTML.
ثم، لهذا، سأقوم بتطبيق سمة MatInput
التي ستمكننا من تطبيق تصميم المواد لهذا الإدخال.
بعد ذلك، سنقدم عنصرًا نائبًا لهذا كاسم مستخدم،
وكما تتوقع،
وسيكون النوع نوع النص هنا.
اسمحوا لي أن أضيف في نغموديل.
لذلك، يتم دعم نموذج يستند إلى القالب من خلال السمة ngModel هنا.
لذلك، مع نغموديل.
لذلك، يمكنك أن ترى طريقة البريد الوارد الموز لإعلان هذا.
بعد ذلك، سنقول user.user.user
لذا، سيكون هذا المستخدم كائنًا جافا سكريبت في ملف TypeScript الخاص بي،
والذي سيحتوي على خاصية اسم المستخدم هناك،
والتي ستتبع القيمة التي تقوم بإدخالها في حقل الإدخال هذا في النموذج الخاص بي هناك.
لذلك، هذا هو السبب في أننا ربط معلومات حقل الإدخال هذه في كائن جافا سكريبت هذا.
لذا، هذا هو ربط البيانات ثنائي الاتجاه الذي نقوم به
بين عنصر النموذج ورمز جافا سكريبت المقابل.
بعد ذلك، سنعطي هذا الاسم كاسم مستخدم هنا.
لذا، هذه هي حقول النموذج الأولى التي أضفتها هنا.
الآن، وبالمثل، سأضيف في حقل النموذج الثاني لكلمة المرور.
لذلك، لذلك، اسمحوا لي فقط نسخ هذا ومن ثم لصقه هنا.
لذا، سيكون الحقل الثاني هو الإدخال، MatInput،
العنصر النائب هو كلمة المرور،
ثم النوع هو كلمة المرور.
لذلك، عنصر إدخال كلمة المرور من دعم نموذج HTML5.
سيتم ربط ngModel نفسه بكلمة مرور المستخدم وسيكون الاسم كلمة المرور.
لذلك، ترى أن كائن جافا سكريبت المستخدم يحتوي الآن على اثنين من الخصائص،
اسم المستخدم وكلمة المرور، والتي سوف تتبع بيانات اعتماد المستخدم هنا.
لذلك، هذين الحقلين نموذج داخل هذا p هنا،
وبعد ذلك أيضا سوف نضيف في واحد
آخر يسمى مربع الاختيار حصيرة.
رأيت أننا قد أدرجنا وحدة مربع الاختيار في وقت سابق.
لذلك، نحن ذاهبون لإضافة في هذا.
الآن، مربع الاختيار هذا الذي عند وضع علامة عليه سيعلم
تطبيق Angular الخاص بي أنه يجب حفظ اسم المستخدم وكلمة المرور في التطبيق.
لذلك، اسمحوا لي أن ربط هذا مع نموذج نغ إلى
خاصية المقابلة تسمى تذكر في كائن المستخدم.
لذا، سيكون هذا،
ستكون هذه الخاصية إما صحيحة أو خاطئة اعتمادًا
على ما إذا كان مربع الاختيار محدد أو غير محدد.
إذاً، هذه هي الطريقة التي نتعقبها
لذلك، نقوم بربط البيانات ثنائي الاتجاه بين مربع الاختيار هذا وهذه
الخاصية تسمى تذكر كائن جافا سكريبت المستخدم في شفرتي هناك.
ثم الاسم سوف نتذكر،
وبعد ذلك سوف نعطي هذه التسمية كما تذكرني.
لذلك، عندما يتحقق المستخدم من هذا،
ثم سيتم تذكر معلومات المستخدم هنا.
لذلك، هذا هو مربع الاختيار الحصير الذي أضفناه.
لذلك، لدينا ثلاثة حقول هنا،
اسم المستخدم، كلمة المرور،
ثم مربع الاختيار هنا في النموذج الخاص بي هنا.
لذلك، هذا هو محتوى الحوار الحصير هنا.
الآن، بالإضافة إلى محتوى الحوار الحصير،
يمكنني أيضا إضافة إجراءات الحوار الحصير هنا.
الآن، يمكن أن تحتوي إجراءات الحوار على الأزرار التي تتوافق مع مربع الحوار هذا.
لذلك، هذا هو ما سيكون بمثابة أزرار العمل في الحوار،
وأيضا لأنها محاطة داخل النموذج،
وهذه الأزرار أيضا بمثابة أزرار تقديم النموذج بالنسبة لي.
لذلك، هنا، اسمحوا لي أن أفعل فاصل مرنة فئة تمتد،
ومن ثم اسمحوا لي أن أضيف في زر،
حصيرة زر، ومن ثم هذا الزر،
وسوف تتحول أيضا إلى زر إغلاق الحصيرة الحوار.
لذلك، سيكون هذا زر إلغاء سأضمنه في النموذج الخاص بي هنا،
ثم يتم النقر على هذا سيتم رفض الحوار،
وبشكل أساسي مما يعني أنك لا تقدم النموذج هناك.
لذلك، وهذا يعمل أيضا كزر إلغاء للنموذج،
ومن ثم أيضا رفض الحوار في نفس الوقت.
لذلك، باستخدام هذه السمة إلى هذا الزر،
ونحن نعلن هذا على أنه الزر الذي يرفض الخطأ،
بنفس الطريقة التي لدينا هذا الزر في شريط الأدوات.
لذلك، إغلاق الحوار الحصيرة هناك.
ثم الزر الآخر الذي سيكون لدينا هو
للإرسال بحيث
يكون نوع الزر هذا هو زر الإرسال داخل نموذج هناك.
لذلك، عندما يتم النقر على هذا،
أن يؤدي إلى تقديم النموذج لهذا النموذج هنا،
ومن ثم اسمحوا لي أن أضيف في فئة لهذا،
وسوف نقول الخلفية الأساسية، والنص الأزهار.
هذه الفئات لقد أضفت بالفعل إلى ملف Styles.acss الخاص بي هناك.
لذلك، نص الأزهار البيضاء،
وسيتم تسمية هذا الزر على أنه زر تسجيل الدخول هناك.
لذلك، سيكون هذا زر أزرق اللون الذي سيتم عرضه في الشاشة هناك.
لذلك، مع هذا، يتم إنشاء هيكل النموذج الخاص بي في القالب هناك.
الآن، الخطوة التالية هي الانتقال إلى الشفرة ثم التعامل مع إرسال النموذج نفسه.
لذلك، الآن الذهاب إلى ملف component.ts تسجيل الدخول،
نحن بحاجة إلى التعامل مع تقديم النموذج هنا.
الآن، الخطوة الأولى التي سأقوم بها هي عندما يتم إنشاء مكون تسجيل الدخول هذا،
سنقوم بإنشاء كائن مستخدم هنا مع اسم المستخدم الخاص بالخصائص،
والذي سيكون سلسلة فارغة للبدء بها،
كلمة المرور التي ستكون أيضًا سلسلة فارغة لتبدأ
بها، ثم تذكر ما هو خطأ.
الآن، من خلال إعلان هذا هنا،
نحن نقول أيضا أنه يمكننا الآن ربط في
هذه الخصائص الثلاثة إلى عناصر النموذج الثلاثة في القالب الخاص بي.
لذلك، هذا ما انتهى بنا الأمر إلى تحقيقه هنا.
بالنسبة للمنشئ، اسمحوا
لي أن حقن المرجع الحوار هنا،
حصيرة الحوار المرجع، وهذا الحكم الحوار حصيرة سوف تأخذ المكون المقابل.
لذلك، هذا هو إشارة إلى هذا المكون تسجيل الدخول هنا.
لذلك، هذا يخبرنا متى - عندما يتم تقديم هذا،
وكيفية التعامل مع هذا.
لذلك، هنا، اسمحوا لي أن أضيف في وظيفة على إرسال هنا،
وداخل وظيفة على إرسال،
وأنا ذاهب ببساطة لتسجيل الدخول،
وتسجيل معلومات المستخدمين المقابلة،
لذلك ثم ينقر المستخدم على نموذج تسجيل الدخول،
نموذج تسجيل الدخول ويقدم نموذج تسجيل الدخول.
أنا فقط ذاهب لتسجيل معلومات المستخدم إلى وحدة التحكم في الوقت الحالي.
في وقت لاحق، سنقوم بتصميم في دورة من جانب الخادم.
سوف نتعامل مع عملية تسجيل الدخول الفعلية عندما يكون
خادمنا جاهزًا وقادرًا على التعامل مع تسجيل الدخول للمستخدم.
لذا، بعد هذا، سنقول أن هذا الحوار قد انتهى
الآن، لماذا نقوم بتضمين هذا هنا؟
لذلك، عندما يتم تقديم النموذج،
نريد أيضا أن نرفض المكون هناك،
عنصر الحوار هناك.
و بالتالي, فإننا إذ
نطلق على هذا الحوار,
فإننا نطلب من عنصر الحوار أن يغلق هنا.
لذلك، هذا هو السبب في أنني أحصل على إشارة إلى مكون تسجيل الدخول هنا،
والذي يعمل كمكون الحوار الخاص بي هنا.
لذلك، سنكون قادرين على إغلاق مكون الحوار عن طريق القيام بذلك.
لذلك، بمجرد قيام المستخدم بإرسال النموذج،
ستقوم بتسجيل معلومات المستخدم،
ثم قم بإغلاق مربع الحوار. هذا كل شيء
دعونا حفظ التغييرات ثم انتقل ونلقي نظرة على التطبيق المحدث.
انتقل إلى تطبيقنا في المتصفح،
واسمحوا لي بفتح وحدة تحكم جافا سكريبت بحيث يمكنك رؤية المعلومات التي يتم تسجيل الدخول.
اسمحوا لي أن فتح مربع حوار تسجيل الدخول هنا مع النموذج بالفعل في مكان،
اسم المستخدم وكلمة المرور بالفعل في المكان.
لذلك، اسمحوا لي أن اكتب اسم المستخدم.
أنا أتصرف بالنرجسية هنا
لذلك، أنا أكتب في اسم المستخدم وكلمة المرور هنا.
الآن، لاحظ أنه عند كتابة المعلومات هنا،
نظرًا لأنني أعرض قيمة كائن جافا سكريبت المستخدم هنا، فإن
أي تغييرات أجريها تنعكس على الفور على الشاشة هنا.
أيضا مربع الاختيار تذكر يجري وضع علامة على وخارج هنا.
ثم عند إرسال النموذج هنا،
يمكنك أن ترى أنه في وحدة التحكم،
يتم تسجيل معلومات المستخدم إلى وحدة التحكم،
واسم المستخدم، وكلمة المرور،
ويتم تأمين قيمة تذكر إلى وحدة التحكم.
لذلك، يمكنك الآن أن ترى أن نموذج تسجيل الدخول الخاص بي،
النموذج المدفوع القالب يعمل بشكل صحيح.
مع هذا، ونحن استكمال هذا التمرين،
حيث رأينا كيف يمكننا تصميم نموذج مدفوعة قالب في التطبيق الزاوي لدينا.
هذا هو الوقت المناسب بالنسبة لك للقيام Git Commit مع الرسالة،
قالب مدفوعة النماذج الجزء 1.