1
00:00:03,170 --> 00:00:05,820
الآن بعد أن تعلمنا عن

2
00:00:05,820 --> 00:00:11,165
دعم التحقق من صحة النموذج القائم على القالب في Angular في المحاضرة السابقة،

3
00:00:11,165 --> 00:00:14,625
دعنا نطبق ما تعلمناه

4
00:00:14,625 --> 00:00:18,330
على نموذج تسجيل الدخول الذي قمنا بتصميمه في التمرين السابق.

5
00:00:18,330 --> 00:00:21,395
سنقوم بإجراء التحقق من صحة النموذج البسيط لنموذج تسجيل الدخول. على

6
00:00:21,395 --> 00:00:26,160
وجه الخصوص، سنقوم بتحديد اسم المستخدم وكلمة المرور كما هو مطلوب،

7
00:00:26,160 --> 00:00:32,430
ثم تحقق للتأكد من أن المستخدم نوع في المعلومات في هذه الحقول،

8
00:00:32,430 --> 00:00:37,125
وتكون قادرة على عرض رسائل الخطأ عندما تكون الحقول فارغة.

9
00:00:37,125 --> 00:00:46,180
دعونا المضي قدما في هذا التعديل على التطبيق في هذا التمرين.

10
00:00:46,180 --> 00:00:49,215
للبدء في هذا التمرين،

11
00:00:49,215 --> 00:00:53,600
دعنا نذهب إلى نموذج تسجيل الدخول هنا،

12
00:00:53,600 --> 00:00:57,090
الذي لدينا في قالب مكونات تسجيل الدخول هنا.

13
00:00:57,090 --> 00:01:02,400
لقد أضفنا بالفعل في السمة novalidate إلى نموذج تسجيل الدخول.

14
00:01:02,400 --> 00:01:10,780
لذا، دعنا نضيف متغير القالب المسمى LogInform إلى هذا القالب،

15
00:01:10,780 --> 00:01:18,835
ثم نضبط هذا على ngForm كما فهمناه من المحاضرة السابقة هنا.

16
00:01:18,835 --> 00:01:20,170
لذلك، من خلال القيام بذلك

17
00:01:20,170 --> 00:01:26,500
، نحن نحدد أن متغير القالب هذا يمكننا من تتبع حالة النموذج.

18
00:01:26,500 --> 00:01:31,330
لذلك، يمكننا حتى التحقق من حالة صالحة أو غير صالحة لهذا النموذج.

19
00:01:31,330 --> 00:01:34,485
الآن، بالإضافة إلى ذلك، لكل من هذه المدخلات،

20
00:01:34,485 --> 00:01:43,620
سنقوم أيضًا بإضافة متغيرات القالب المقابلة هنا.

21
00:01:43,620 --> 00:01:45,220
لذلك، اسمحوا لي أن انتقل إلى السطر التالي هنا،

22
00:01:45,220 --> 00:01:52,670
وهناك سأقول اسم المستخدم هو ngModel.

23
00:01:52,670 --> 00:01:58,360
ثم، سنقوم أيضا تحديد هذا كما هو مطلوب هنا.

24
00:01:58,360 --> 00:02:00,660
وبالمثل، بالنسبة لكلمة المرور،

25
00:02:00,660 --> 00:02:09,545
سنضيف متغير القالب المقابل هنا ككلمة المرور في ngModel،

26
00:02:09,545 --> 00:02:15,700
ثم نحدد هذا كما هو مطلوب هنا.

27
00:02:15,700 --> 00:02:19,700
لذلك، الآن بعد أن حددنا متغيرات القالب،

28
00:02:19,700 --> 00:02:23,870
يمكننا بعد ذلك تنفيذ بعض عمليات التحقق من صحة النموذج هنا.

29
00:02:23,870 --> 00:02:26,490
الآن، لأننا نحدد هذا كما هو مطلوب،

30
00:02:26,490 --> 00:02:28,280
وهذا يعني أنه إذا كانت هذه الحقول،

31
00:02:28,280 --> 00:02:30,455
حقول الإدخال فارغة،

32
00:02:30,455 --> 00:02:34,525
ثم سيتم وضع علامة على الخطأ المطلوب لهذا الغرض.

33
00:02:34,525 --> 00:02:40,105
وبالمثل، الآن بعد أن أصبح لدينا متغير القالب للنموذج،

34
00:02:40,105 --> 00:02:47,380
يمكننا بسهولة استخدام ذلك للتحقق من الزر إرسال وتعطيل أسفل هنا.

35
00:02:47,380 --> 00:02:49,255
لذلك، بالنسبة للزر إرسال،

36
00:02:49,255 --> 00:02:53,270
ما نقوم به هنا هو استخدام

37
00:02:53,270 --> 00:03:01,080
الحقل المعطل هنا،

38
00:03:01,080 --> 00:03:03,500
وبعد ذلك سنقوم بتعيين الحقل المعطل

39
00:03:03,500 --> 00:03:12,270
إلى LogInform.invald.

40
00:03:12,270 --> 00:03:14,030
لذلك، من خلال القيام بذلك،

41
00:03:14,030 --> 00:03:18,030
سنقوم بتعطيل هذا الزر عندما يكون النموذج غير صالح.

42
00:03:18,030 --> 00:03:23,925
لذلك، وبالتالي، لا يمكن للمستخدم حتى إرسال النموذج عندما يحتوي النموذج على إدخال غير صالح.

43
00:03:23,925 --> 00:03:27,355
لذلك، على سبيل المثال، إذا كان اسم المستخدم فارغًا أو كانت كلمة المرور فارغة،

44
00:03:27,355 --> 00:03:29,520
فسيكون نموذج تسجيل الدخول غير صالح،

45
00:03:29,520 --> 00:03:32,290
وبالتالي لا يمكن للمستخدم إرسال هذا النموذج.

46
00:03:32,290 --> 00:03:36,950
الآن، هذا جزء واحد من التحقق

47
00:03:36,950 --> 00:03:40,385
من صحة النموذج الذي يمكننا القيام به، حيث يمكننا منع تقديم النموذج.

48
00:03:40,385 --> 00:03:43,285
بالإضافة إلى ذلك، لكل من هذه الحقول،

49
00:03:43,285 --> 00:03:47,945
يمكننا حتى عرض رسالة خطأ

50
00:03:47,945 --> 00:03:53,875
للإشارة إلى نوع الخطأ الذي يحدث في هذا الحقل بالذات.

51
00:03:53,875 --> 00:03:55,309
لذلك، للقيام بذلك،

52
00:03:55,309 --> 00:03:58,230
إلى كل عنصر من عناصر حقل النموذج هذه،

53
00:03:58,230 --> 00:04:07,650
سنضيف في علامة خطأ الحصيرة هناك،

54
00:04:07,650 --> 00:04:12,270
وبعد ذلك سنقول إيقاف nGiF،

55
00:04:12,270 --> 00:04:18,345
وسنقول username.errors.

56
00:04:18,345 --> 00:04:23,920
لذا، لاحظ أننا قد أعطينا هذا القالب بالفعل متغيرًا يسمى اسم المستخدم،

57
00:04:23,920 --> 00:04:28,665
حتى نتمكن من استخدامه في username.errors إذا كانت هناك أخطاء

58
00:04:28,665 --> 00:04:34,930
وإذا كان نوع الخطأ هذا مطلوبًا.

59
00:04:34,930 --> 00:04:41,810
لذلك، إذا كان الخطأ هو نوع مطلوب من الخطأ الذي يسبب هناك،

60
00:04:41,810 --> 00:04:44,060
ثم في هذه المرحلة،

61
00:04:44,060 --> 00:04:54,140
يمكننا تحديد أن الخطأ المقابل ليتم عرضه هو اسم المستخدم مطلوب.

62
00:04:54,140 --> 00:04:59,305
لذلك، هذا هو الخطأ الذي سيتم عرضه لهذا الحقل هنا.

63
00:04:59,305 --> 00:05:03,810
وبالمثل، اسمحوا لي أن أضيف نفس النوع من الشيء لحقل كلمة المرور هنا.

64
00:05:03,810 --> 00:05:06,610
لذلك، اسمحوا لي أن نسخ ذلك ومن ثم لصقه في هنا،

65
00:05:06,610 --> 00:05:09,110
وبعد ذلك سوف نقول كلمة السر.

66
00:05:09,110 --> 00:05:17,395
ثم، ستكون الرسالة كلمة المرور مطلوبة.

67
00:05:17,395 --> 00:05:19,070
لذلك، بإضافة هذا،

68
00:05:19,070 --> 00:05:22,535
سنقوم بعرض رسائل خطأ أسفل

69
00:05:22,535 --> 00:05:27,665
هذه الحقول عندما لا يحتوي الحقل على أي معلومات.

70
00:05:27,665 --> 00:05:29,950
تصحيح بسيط هنا

71
00:05:29,950 --> 00:05:34,820
يجب أن يكون اسم المستخدم؟ . مطلوب هنا،

72
00:05:34,820 --> 00:05:38,470
وبالمثل، هذا واحد أيضا يجب أن يكون. مطلوب هنا.

73
00:05:38,470 --> 00:05:40,375
لذلك، مع هذه التعديلات،

74
00:05:40,375 --> 00:05:43,280
مكون تسجيل الدخول الخاص بي جاهز الآن

75
00:05:43,280 --> 00:05:47,275
لإجراء التحقق من صحة النموذج ثم عرض رسائل الخطأ.

76
00:05:47,275 --> 00:05:52,505
لذلك، دعونا حفظ التغييرات ثم انتقل ونلقي نظرة على التطبيق المحدث.

77
00:05:52,505 --> 00:05:55,705
الذهاب إلى التطبيق لدينا في المتصفح،

78
00:05:55,705 --> 00:05:58,475
دعونا فتح نموذج تسجيل الدخول هنا.

79
00:05:58,475 --> 00:06:01,720
لذلك، يمكنك أن ترى أن كل من اسم المستخدم وكلمة المرور تحمل

80
00:06:01,720 --> 00:06:05,355
نجمة هناك للإشارة إلى أنهما مطلوبان.

81
00:06:05,355 --> 00:06:07,550
لذلك، اسمحوا لي أن اكتب في.

82
00:06:09,870 --> 00:06:16,130
لذلك، هنا، ترى أن النموذج صالح لأنه يحتوي على معلومات،

83
00:06:16,130 --> 00:06:20,375
وبالتالي سيتم تمكين زر تسجيل الدخول.

84
00:06:20,375 --> 00:06:24,840
اسمحوا لي إزالة المعلومات من حقل كلمة المرور،

85
00:06:24,840 --> 00:06:27,950
ثم لاحظت على الفور أن

86
00:06:27,950 --> 00:06:32,405
الخطأ المشار إليه هنا قائلا مطلوب كلمة المرور.

87
00:06:32,405 --> 00:06:37,040
لاحظ أيضًا أنه لن يتم تمكين زر تسجيل الدخول بعد الآن.

88
00:06:37,040 --> 00:06:40,760
سوف يتم تعطيله لذلك، لن تتمكن من إرسال النموذج هنا.

89
00:06:40,760 --> 00:06:43,960
ولكن في لحظة ملء شيء في كلمة المرور،

90
00:06:43,960 --> 00:06:47,060
ثم سيتم تمكين زر تسجيل الدخول،

91
00:06:47,060 --> 00:06:49,670
ونحن سوف تكون قادرة على تقديم النموذج هنا.

92
00:06:49,670 --> 00:06:51,390
وبالمثل بالنسبة لاسم المستخدم.

93
00:06:51,390 --> 00:06:55,045
إذا قمت بإزالة معلومات اسم المستخدم هناك،

94
00:06:55,045 --> 00:06:58,115
فسترى الخطأ الذي يتم عرضه هنا،

95
00:06:58,115 --> 00:07:04,670
وسترى أيضًا أنه لم يتم تمكين زر تسجيل الدخول في هذه المرحلة.

96
00:07:04,670 --> 00:07:10,270
لذا، هذه هي الطريقة التي يمكن بها تنفيذ التحقق من صحة النموذج في هذه الحالة.

97
00:07:10,270 --> 00:07:12,170
لذلك، كما رأيت،

98
00:07:12,170 --> 00:07:15,960
من خلال إضافة التحقق من صحة النموذج البسيط إلى تطبيقنا،

99
00:07:15,960 --> 00:07:18,515
يمكننا التحقق للتأكد من أن

100
00:07:18,515 --> 00:07:22,925
الحقول تحتوي على المعلومات التي يفترض أنها تحتوي عليها،

101
00:07:22,925 --> 00:07:24,725
وفي الشكل الصحيح.

102
00:07:24,725 --> 00:07:30,290
سوف ندرس أكثر من ذلك بقليل من التحقق من صحة النموذج في واحدة من التمارين اللاحقة،

103
00:07:30,290 --> 00:07:33,020
وخاصة بالنسبة للأشكال التفاعلية.

104
00:07:33,020 --> 00:07:35,945
مع هذا، نكمل هذا التمرين.

105
00:07:35,945 --> 00:07:38,840
هذا هو الوقت المناسب بالنسبة لك للقيام git الالتزام

106
00:07:38,840 --> 00:07:43,080
مع النماذج التي يحركها قالب الرسالة، الجزء الثاني.