الآن بعد أن تعلمنا عن
دعم التحقق من صحة النموذج القائم على القالب في Angular في المحاضرة السابقة،
دعنا نطبق ما تعلمناه
على نموذج تسجيل الدخول الذي قمنا بتصميمه في التمرين السابق.
سنقوم بإجراء التحقق من صحة النموذج البسيط لنموذج تسجيل الدخول. على
وجه الخصوص، سنقوم بتحديد اسم المستخدم وكلمة المرور كما هو مطلوب،
ثم تحقق للتأكد من أن المستخدم نوع في المعلومات في هذه الحقول،
وتكون قادرة على عرض رسائل الخطأ عندما تكون الحقول فارغة.
دعونا المضي قدما في هذا التعديل على التطبيق في هذا التمرين.
للبدء في هذا التمرين،
دعنا نذهب إلى نموذج تسجيل الدخول هنا،
الذي لدينا في قالب مكونات تسجيل الدخول هنا.
لقد أضفنا بالفعل في السمة novalidate إلى نموذج تسجيل الدخول.
لذا، دعنا نضيف متغير القالب المسمى LogInform إلى هذا القالب،
ثم نضبط هذا على ngForm كما فهمناه من المحاضرة السابقة هنا.
لذلك، من خلال القيام بذلك
، نحن نحدد أن متغير القالب هذا يمكننا من تتبع حالة النموذج.
لذلك، يمكننا حتى التحقق من حالة صالحة أو غير صالحة لهذا النموذج.
الآن، بالإضافة إلى ذلك، لكل من هذه المدخلات،
سنقوم أيضًا بإضافة متغيرات القالب المقابلة هنا.
لذلك، اسمحوا لي أن انتقل إلى السطر التالي هنا،
وهناك سأقول اسم المستخدم هو ngModel.
ثم، سنقوم أيضا تحديد هذا كما هو مطلوب هنا.
وبالمثل، بالنسبة لكلمة المرور،
سنضيف متغير القالب المقابل هنا ككلمة المرور في ngModel،
ثم نحدد هذا كما هو مطلوب هنا.
لذلك، الآن بعد أن حددنا متغيرات القالب،
يمكننا بعد ذلك تنفيذ بعض عمليات التحقق من صحة النموذج هنا.
الآن، لأننا نحدد هذا كما هو مطلوب،
وهذا يعني أنه إذا كانت هذه الحقول،
حقول الإدخال فارغة،
ثم سيتم وضع علامة على الخطأ المطلوب لهذا الغرض.
وبالمثل، الآن بعد أن أصبح لدينا متغير القالب للنموذج،
يمكننا بسهولة استخدام ذلك للتحقق من الزر إرسال وتعطيل أسفل هنا.
لذلك، بالنسبة للزر إرسال،
ما نقوم به هنا هو استخدام
الحقل المعطل هنا،
وبعد ذلك سنقوم بتعيين الحقل المعطل
إلى LogInform.invald.
لذلك، من خلال القيام بذلك،
سنقوم بتعطيل هذا الزر عندما يكون النموذج غير صالح.
لذلك، وبالتالي، لا يمكن للمستخدم حتى إرسال النموذج عندما يحتوي النموذج على إدخال غير صالح.
لذلك، على سبيل المثال، إذا كان اسم المستخدم فارغًا أو كانت كلمة المرور فارغة،
فسيكون نموذج تسجيل الدخول غير صالح،
وبالتالي لا يمكن للمستخدم إرسال هذا النموذج.
الآن، هذا جزء واحد من التحقق
من صحة النموذج الذي يمكننا القيام به، حيث يمكننا منع تقديم النموذج.
بالإضافة إلى ذلك، لكل من هذه الحقول،
يمكننا حتى عرض رسالة خطأ
للإشارة إلى نوع الخطأ الذي يحدث في هذا الحقل بالذات.
لذلك، للقيام بذلك،
إلى كل عنصر من عناصر حقل النموذج هذه،
سنضيف في علامة خطأ الحصيرة هناك،
وبعد ذلك سنقول إيقاف nGiF،
وسنقول username.errors.
لذا، لاحظ أننا قد أعطينا هذا القالب بالفعل متغيرًا يسمى اسم المستخدم،
حتى نتمكن من استخدامه في username.errors إذا كانت هناك أخطاء
وإذا كان نوع الخطأ هذا مطلوبًا.
لذلك، إذا كان الخطأ هو نوع مطلوب من الخطأ الذي يسبب هناك،
ثم في هذه المرحلة،
يمكننا تحديد أن الخطأ المقابل ليتم عرضه هو اسم المستخدم مطلوب.
لذلك، هذا هو الخطأ الذي سيتم عرضه لهذا الحقل هنا.
وبالمثل، اسمحوا لي أن أضيف نفس النوع من الشيء لحقل كلمة المرور هنا.
لذلك، اسمحوا لي أن نسخ ذلك ومن ثم لصقه في هنا،
وبعد ذلك سوف نقول كلمة السر.
ثم، ستكون الرسالة كلمة المرور مطلوبة.
لذلك، بإضافة هذا،
سنقوم بعرض رسائل خطأ أسفل
هذه الحقول عندما لا يحتوي الحقل على أي معلومات.
تصحيح بسيط هنا
يجب أن يكون اسم المستخدم؟ . مطلوب هنا،
وبالمثل، هذا واحد أيضا يجب أن يكون. مطلوب هنا.
لذلك، مع هذه التعديلات،
مكون تسجيل الدخول الخاص بي جاهز الآن
لإجراء التحقق من صحة النموذج ثم عرض رسائل الخطأ.
لذلك، دعونا حفظ التغييرات ثم انتقل ونلقي نظرة على التطبيق المحدث.
الذهاب إلى التطبيق لدينا في المتصفح،
دعونا فتح نموذج تسجيل الدخول هنا.
لذلك، يمكنك أن ترى أن كل من اسم المستخدم وكلمة المرور تحمل
نجمة هناك للإشارة إلى أنهما مطلوبان.
لذلك، اسمحوا لي أن اكتب في.
لذلك، هنا، ترى أن النموذج صالح لأنه يحتوي على معلومات،
وبالتالي سيتم تمكين زر تسجيل الدخول.
اسمحوا لي إزالة المعلومات من حقل كلمة المرور،
ثم لاحظت على الفور أن
الخطأ المشار إليه هنا قائلا مطلوب كلمة المرور.
لاحظ أيضًا أنه لن يتم تمكين زر تسجيل الدخول بعد الآن.
سوف يتم تعطيله لذلك، لن تتمكن من إرسال النموذج هنا.
ولكن في لحظة ملء شيء في كلمة المرور،
ثم سيتم تمكين زر تسجيل الدخول،
ونحن سوف تكون قادرة على تقديم النموذج هنا.
وبالمثل بالنسبة لاسم المستخدم.
إذا قمت بإزالة معلومات اسم المستخدم هناك،
فسترى الخطأ الذي يتم عرضه هنا،
وسترى أيضًا أنه لم يتم تمكين زر تسجيل الدخول في هذه المرحلة.
لذا، هذه هي الطريقة التي يمكن بها تنفيذ التحقق من صحة النموذج في هذه الحالة.
لذلك، كما رأيت،
من خلال إضافة التحقق من صحة النموذج البسيط إلى تطبيقنا،
يمكننا التحقق للتأكد من أن
الحقول تحتوي على المعلومات التي يفترض أنها تحتوي عليها،
وفي الشكل الصحيح.
سوف ندرس أكثر من ذلك بقليل من التحقق من صحة النموذج في واحدة من التمارين اللاحقة،
وخاصة بالنسبة للأشكال التفاعلية.
مع هذا، نكمل هذا التمرين.
هذا هو الوقت المناسب بالنسبة لك للقيام git الالتزام
مع النماذج التي يحركها قالب الرسالة، الجزء الثاني.