1
00:00:03,650 --> 00:00:09,630
لقد تعاملنا مع أشكال رد الفعل في أحد الدروس السابقة،

2
00:00:09,630 --> 00:00:14,420
حيث قمنا بتمرين يتعامل مع أشكال رد الفعل،

3
00:00:14,420 --> 00:00:15,695
وكيف نقوم بإنشائها،

4
00:00:15,695 --> 00:00:20,530
ثم نقوم أيضًا ببعض التحقق من صحة النموذج الأساسي على أشكال تفاعلية.

5
00:00:20,530 --> 00:00:24,525
سنستمر في الموضوع في هذا الدرس،

6
00:00:24,525 --> 00:00:28,790
لأن الأشكال التفاعلية كما يوحي الاسم،

7
00:00:28,790 --> 00:00:33,019
لها علاقة بالبرمجة التفاعلية كما كنت تتوقع.

8
00:00:33,019 --> 00:00:42,429
الآن، تمكنك النماذج التفاعلية أيضًا من مشاهدة التغييرات في قيم عناصر النموذج،

9
00:00:42,429 --> 00:00:48,320
باستخدام عنصر يمكن ملاحظته يجعل Angular متاحًا يسمى ValueChanges.

10
00:00:48,320 --> 00:00:53,450
سنستفيد من ValueChanges التي يمكن ملاحظتها في هذا التمرين،

11
00:00:53,450 --> 00:00:57,080
من أجل تتبع التغييرات على قيم

12
00:00:57,080 --> 00:01:01,650
عناصر شكلها المختلفة ثم قم بتشغيل التحقق من صحة النموذج على الفور.

13
00:01:01,650 --> 00:01:06,350
في هذا التمرين، سنقوم بمعظم التحقق من صحة النموذج في

14
00:01:06,350 --> 00:01:11,120
الكود بدلاً من القالب نفسه،

15
00:01:11,120 --> 00:01:19,189
كما فعلنا مع التحقق من صحة نموذج المفاعل في التمرين الثاني للنماذج التفاعلية.

16
00:01:19,189 --> 00:01:24,115
الذهاب إلى الاتصال ب.component.tsfile،

17
00:01:24,115 --> 00:01:29,720
سنقوم بتحديث النموذج التفاعلي الذي أنشأنا هنا،

18
00:01:29,720 --> 00:01:34,445
عن طريق إضافة عدد قليل من المدققين لبعض هذه الحقول.

19
00:01:34,445 --> 00:01:38,915
لذلك، هنا ترى أن الاسم الأخير الأول

20
00:01:38,915 --> 00:01:43,465
ورقم الهاتف والبريد الإلكتروني قمنا بإضافة المصادقة المطلوبة.

21
00:01:43,465 --> 00:01:45,290
بالنسبة للاسم الأول والأخير،

22
00:01:45,290 --> 00:01:48,500
سأقوم بإضافة اثنين من المدققين للحصول على

23
00:01:48,500 --> 00:01:52,315
الحد الأدنى للطول والحد الأقصى للطول.

24
00:01:52,315 --> 00:01:57,185
الآن، إذا كان لديك أكثر من مدقق واحد في النموذج التفاعلي الخاص بك،

25
00:01:57,185 --> 00:02:04,470
يجب عليك الإعلان عنها باستخدام مصفوفة هناك.

26
00:02:04,470 --> 00:02:08,385
لذلك، هذا يجب أن تكون محاطة داخل صفيف هنا.

27
00:02:08,385 --> 00:02:12,790
لذلك، ترى أنني قد أرفقت المدقق المطلوب داخل صفيف.

28
00:02:12,790 --> 00:02:21,300
أنا ذاهب لإضافة في المدققين، مينلينغث المدقق.

29
00:02:21,300 --> 00:02:25,250
لذلك، بالنسبة إلى الحد الأدنى للطول، سأحدد اثنين كالحد الأدنى للطول،

30
00:02:25,250 --> 00:02:28,925
لذلك يجب أن يحتوي الاسم الأول على حرفين على الأقل.

31
00:02:28,925 --> 00:02:36,645
أيضا الحد الأقصى للطول الذي

32
00:02:36,645 --> 00:02:48,035
سأضيف 25 حرفا.

33
00:02:48,035 --> 00:02:52,740
لذلك، هنا ترى أنه الآن للاسم الأول لدينا ثلاثة عمليات التحقق المختلفة،

34
00:02:52,740 --> 00:02:55,455
وكلها محاطة في صفيف هنا.

35
00:02:55,455 --> 00:02:58,620
المدققين المطلوبة، المدققين مينلينغث،

36
00:02:58,620 --> 00:03:02,135
و المدققين ماكسلينغث هنا، 25.

37
00:03:02,135 --> 00:03:05,900
لذا، سأفعل نفس الشيء أيضاً من أجل اسمي الأخير

38
00:03:05,900 --> 00:03:11,115
لذلك، اسمحوا لي أن نسخ هذا كله المدققين راي هنا،

39
00:03:11,115 --> 00:03:21,420
ومن ثم استبدال هذا واحد مع تلك المجموعة من المدققين.

40
00:03:21,420 --> 00:03:25,330
الآن بالإضافة إلى ذلك، بالنسبة لرقم الهاتف،

41
00:03:25,330 --> 00:03:29,060
كما تذكرون في الإصدار السابق من النموذج،

42
00:03:29,060 --> 00:03:35,395
كان رقم الهاتف على استعداد لقبول حتى الحروف الهجائية،

43
00:03:35,395 --> 00:03:37,015
ولكن هذا غير صحيح.

44
00:03:37,015 --> 00:03:40,070
أرقام الهواتف عادة ما تكون أرقام.

45
00:03:40,070 --> 00:03:43,955
لذا، هذا هو المكان الذي سنستخدم فيه مدقق آخر

46
00:03:43,955 --> 00:03:53,005
يسمى «التحقق من صحة النمط».

47
00:03:53,005 --> 00:03:57,890
لذا، يسمح لنا النمط المدقق بتحديد نمط

48
00:03:57,890 --> 00:04:02,719
للقيم التي تم إدخالها في عنصر النموذج المعين هذا،

49
00:04:02,719 --> 00:04:09,465
ثم تحقق للتأكد من أن القيمة تتبع النمط المحدد.

50
00:04:09,465 --> 00:04:12,470
لذا، هنا النمط الذي سنستخدمه هو أن القيمة

51
00:04:12,470 --> 00:04:17,180
يجب أن تحتوي فقط على أرقام بين صفر وتسعة.

52
00:04:17,180 --> 00:04:19,015
لإضافة النمط،

53
00:04:19,015 --> 00:04:23,860
نحتاج إلى القيام بذلك في ملف القالب كما سنرى في فترة قصيرة.

54
00:04:23,860 --> 00:04:26,415
وبالمثل، بالنسبة للبريد الإلكتروني،

55
00:04:26,415 --> 00:04:31,635
سيكون لدي أيضًا مدقق آخر يسمى باسم مدقق البريد الإلكتروني.

56
00:04:31,635 --> 00:04:35,035
لذلك، سنقوم بإضافة في البريد الإلكتروني المدققين.

57
00:04:35,035 --> 00:04:40,010
وهذا يعني أيضًا أننا بحاجة إلى إضافة سمة

58
00:04:40,010 --> 00:04:44,990
تسمى البريد الإلكتروني إلى الإدخال في ملف القالب الخاص بنا.

59
00:04:44,990 --> 00:04:53,145
الآن، مع هذه التغييرات، أصبح التحقق من صحة النموذج الآن أكثر قوة في هذا التمرين.

60
00:04:53,145 --> 00:04:59,534
الآن، عندما يتغير النموذج في أي من عناصر شكله،

61
00:04:59,534 --> 00:05:09,530
فإن إطار العمل Angular يوفر ملاحظة تسمى ValueChanges يمكن ملاحظتها.

62
00:05:09,530 --> 00:05:16,150
لذلك، سأستخدم ValueChanges التي يمكن ملاحظتها في نموذج ملاحظاتي.

63
00:05:16,550 --> 00:05:19,770
لذلك، فإن ValueChanges يمكن ملاحظتها.

64
00:05:19,770 --> 00:05:26,640
لذلك، يمكن الآن الاشتراك في ValueChanges التي يمكن ملاحظتها ضمن هذه الطريقة المعينة.

65
00:05:26,640 --> 00:05:28,415
لذلك عندما نقوم بإنشاء النموذج نفسه،

66
00:05:28,415 --> 00:05:31,520
سوف نشترك في ValueChanges التي يمكن ملاحظتها هنا.

67
00:05:31,520 --> 00:05:33,470
الآن، عندما ValueChanges،

68
00:05:33,470 --> 00:05:38,274
وذلك من خلال الاشتراك في هذا ملحوظ،

69
00:05:38,274 --> 00:05:44,630
ضمن الاشتراك سوف تحدد ما ينبغي القيام به عند ValueChanges.

70
00:05:44,630 --> 00:05:49,160
لذلك، عندما ValueChanges سأحصل على بعض البيانات هنا،

71
00:05:49,160 --> 00:05:52,055
من المزرعة للإشارة إلى

72
00:05:52,055 --> 00:05:59,050
عنصر شكل معين قد شهد التغيير في القيمة.

73
00:05:59,050 --> 00:06:00,665
ثم، عندما يحدث ذلك،

74
00:06:00,665 --> 00:06:07,865
سأقوم بتشغيل طريقة محلية سأقوم بتنفيذها تسمى OnValueChanged،

75
00:06:07,865 --> 00:06:13,165
ثم قم بتوفير تلك البيانات كمعلمة لهذه الطريقة.

76
00:06:13,165 --> 00:06:16,455
الآن، داخل هذه الطريقة onValueChanged،

77
00:06:16,455 --> 00:06:20,445
سأقوم ببدء التحقق من صحة النموذج،

78
00:06:20,445 --> 00:06:27,155
ومن ثم تحديد رسائل خطأ النموذج بشكل مناسب استنادًا إلى ما

79
00:06:27,155 --> 00:06:35,380
سيحدده كائن البيانات هذا الذي أحصل عليه هنا لي.

80
00:06:35,380 --> 00:06:39,125
بالإضافة إلى ذلك، عندما أقوم بإنشاء النموذج لأول مرة،

81
00:06:39,125 --> 00:06:47,114
سأتصل بطريقة OnValueChanged بدون أي معلمة،

82
00:06:47,114 --> 00:06:50,250
وسيتم استخدام هذا لإعادة

83
00:06:50,250 --> 00:06:58,615
تعيين رسائل التحقق من صحة النموذج.

84
00:06:58,615 --> 00:07:02,195
الآن، كيف يمكنني إنشاء رسائل التحقق من صحة النموذج؟

85
00:07:02,195 --> 00:07:09,230
للقيام بذلك، سأقوم بتعريف رسائل التحقق من صحة النموذج بالكامل في التعليمات البرمجية هنا.

86
00:07:09,230 --> 00:07:12,620
ثم من خلال التعليمات البرمجية،

87
00:07:12,620 --> 00:07:15,920
وسوف التكيف مع رسائل التحقق من صحة النموذج،

88
00:07:15,920 --> 00:07:23,785
والتي سيتم استخدامها بعد ذلك لعرض رسائل الخطأ في قالب النموذج الخاص بي نفسه.

89
00:07:23,785 --> 00:07:33,830
لذلك للقيام بذلك، ما سأقوم به هو إضافة بعض كائنات جافا سكريبت هنا.

90
00:07:33,830 --> 00:07:42,485
يسمى أحد كائنات JavaScript التي سأقوم بإضافتها كأخطاء في النموذج.

91
00:07:42,485 --> 00:07:46,790
لذلك، هذا هو كائن جافا سكريبت بسيط

92
00:07:46,790 --> 00:07:52,315
يحتوي على جميع الأخطاء لنموذج معين هنا.

93
00:07:52,315 --> 00:07:54,799
لذلك ضمن أخطاء النموذج،

94
00:07:54,799 --> 00:08:02,609
سأستخدم أربعة حقول مختلفة،

95
00:08:02,609 --> 00:08:11,275
الاسم الأول، الاسم الأخير.

96
00:08:11,275 --> 00:08:13,305
لذلك كما تتذكر،

97
00:08:13,305 --> 00:08:21,889
هذه تتوافق مع عناصر النموذج الأربعة التي أقوم بها التحقق من صحة النموذج

98
00:08:21,889 --> 00:08:30,470
ورقم الهاتف والبريد الإلكتروني.

99
00:08:30,470 --> 00:08:35,020
الآن، لماذا أقوم بتعريف كائن جافا سكريبت هذا هنا؟

100
00:08:35,020 --> 00:08:41,075
الآن، يحتوي كائن جافا سكريبت هذا كما ترى على أربعة عناصر هنا.

101
00:08:41,075 --> 00:08:44,270
الآن، كلما أفعل التحقق من صحة النموذج،

102
00:08:44,270 --> 00:08:47,090
تذكر أنني حددت بالفعل

103
00:08:47,090 --> 00:08:50,915
أنني سأقوم بإنشاء طريقة جديدة تسمى OnValueChange.

104
00:08:50,915 --> 00:08:55,145
داخل onValueChange، الطريقة التي تتم بها كتابة التعليمات البرمجية هي أنه في

105
00:08:55,145 --> 00:09:02,315
حالة اكتشاف أي خطأ،

106
00:09:02,315 --> 00:09:08,135
ستتم إضافة سلسلة تحتوي على الرسالة المقابلة لهذا الخطأ إلى كائن JavaScript هذا.

107
00:09:08,135 --> 00:09:10,535
لذا، بهذه الطريقة داخل شفرتي،

108
00:09:10,535 --> 00:09:13,204
يمكنني إجراء التحقق من صحة النموذج.

109
00:09:13,204 --> 00:09:15,315
الآن، بالإضافة إلى ذلك،

110
00:09:15,315 --> 00:09:21,150
سأحدد الآن بعض رسائل التحقق من الصحة.

111
00:09:21,840 --> 00:09:27,100
الآن، هذا النمط الخاص من القيام بالأشياء،

112
00:09:27,100 --> 00:09:36,345
تعلمت من خلال قراءة الوثائق على التحقق من صحة النموذج في موقع angular.io.

113
00:09:36,345 --> 00:09:43,020
لذلك، لديهم وثائق كاملة حول كيفية القيام التحقق من صحة النموذج ورابط الذي

114
00:09:43,020 --> 00:09:45,315
يتوفر في الموارد الإضافية

115
00:09:45,315 --> 00:09:50,510
لهذا الفصل وأيضا الفصول السابقة على الأشكال الزاوي.

116
00:09:50,510 --> 00:09:55,950
لذلك، هناك في هذه الوثيقة معينة أنها

117
00:09:55,950 --> 00:10:02,655
تصف هذا كوسيلة للقيام التحقق من صحة النموذج ووجدت أن تكون بديهية جدا.

118
00:10:02,655 --> 00:10:08,640
لذلك، اعتمدت أيضا نفس النمط للقيام التحقق من صحة النموذج في التعليمات البرمجية.

119
00:10:08,640 --> 00:10:10,500
لذلك، جنبا إلى جنب مع هنا،

120
00:10:10,500 --> 00:10:20,515
وأنا ذاهب لتحديد رسائل التحقق من الصحة لجميع الحقول الممكنة هنا.

121
00:10:20,515 --> 00:10:22,475
لذلك، بالنسبة لحقل الاسم الأول،

122
00:10:22,475 --> 00:10:30,050
سأحدد بعض رسائل التحقق من الصحة هنا، لذلك أود أن أقول،

123
00:10:30,050 --> 00:10:32,965
«مطلوب» ثم أقول،

124
00:10:32,965 --> 00:10:39,940
«الاسم الأول مطلوب» مثل هذا،

125
00:10:39,940 --> 00:10:48,790
وسوف أضيف في بعض رسائل التحقق من الصحة

126
00:10:48,790 --> 00:10:52,030
هنا ويقول،

127
00:10:52,030 --> 00:10:57,070
«يجب أن يكون الاسم الأول

128
00:10:57,070 --> 00:11:05,770
على الأقل 2 أحرف طويلة» وبعد ذلك سوف إضافة أيضا،

129
00:11:05,770 --> 00:11:15,700
«أقصى طول» والرسالة المقابلة ستكون،

130
00:11:15,700 --> 00:11:23,630
«الاسم الأول لا يمكن أن يكون أكثر من 25".

131
00:11:24,780 --> 00:11:29,685
إذا كان لديك اسم يصل إلى 25 حرفا،

132
00:11:29,685 --> 00:11:35,115
يجب أن تكون حقا لعن والديك على ذلك، صدقوني،

133
00:11:35,115 --> 00:11:39,670
واحدة من اسمي الأوسط هو اسم طويل،

134
00:11:39,670 --> 00:11:46,035
والتي لا أستخدمها صراحة في وثائقي.

135
00:11:46,035 --> 00:11:48,870
ولكن، أستطيع أن أفهم الألم،

136
00:11:48,870 --> 00:11:55,450
إذا كان لديك اسم طويل أكبر من 25 حرفا.

137
00:11:56,700 --> 00:12:02,900
الناس من بعض الولايات في الجزء الجنوبي من الهند لديهم أسماء طويلة،

138
00:12:03,690 --> 00:12:06,870
وتشمل ولايتي، مهلا،

139
00:12:06,870 --> 00:12:09,270
دعونا الحصول على بعض المرح بينما نحن في ذلك.

140
00:12:09,270 --> 00:12:17,180
حسناً، سأقوم أيضاً بتضمين نفس الشيء للإسم الأخير

141
00:12:17,180 --> 00:12:23,380
لذلك، سأقوم بتحرير هذا

142
00:12:23,380 --> 00:12:33,430
وتحديد نفس الشيء مثل الاسم الأخير.

143
00:12:33,430 --> 00:12:39,020
لذلك، كما ترى داخل التعليمات البرمجية يمكنك تحديد مجموعة من رسائل الخطأ.

144
00:12:39,020 --> 00:12:42,855
الآن، إذا قمت بإضافة التحقق من صحة جديدة إلى النماذج الخاصة بك،

145
00:12:42,855 --> 00:12:44,505
كل ما عليك القيام به هو،

146
00:12:44,505 --> 00:12:47,230
تعال هنا وإضافة رسالة الخطأ الجديدة إلى

147
00:12:47,230 --> 00:12:54,635
كائن جافا سكريبت هذا هنا وسوف تعمل التعليمات البرمجية الخاصة بك على ما يرام، على هذا النحو.

148
00:12:54,635 --> 00:13:03,015
لذلك، هذه هي ميزة استخدام هذا النمط لتصميم التحقق من الصحة في التعليمات البرمجية.

149
00:13:03,015 --> 00:13:09,835
استمرار، اسمحوا لي أن تحديد التحقق من صحة رقم الهاتف

150
00:13:09,835 --> 00:13:17,700
واثنين من التحقق من صحة أرقام الهاتف التي من شأنها أن تحدث هو «مطلوب».

151
00:13:17,700 --> 00:13:22,390
لذا، سأقوم فقط بنسخ «مطلوب» من هناك،

152
00:13:22,390 --> 00:13:24,170
ولصقه هنا،

153
00:13:24,170 --> 00:13:27,215
وأود أن أقول،

154
00:13:27,215 --> 00:13:36,910
«رقم الهاتف مطلوب»، وستكون رسالة الخطأ التالية لـ «نمط».

155
00:13:36,910 --> 00:13:42,585
لذلك، رسالة الخطأ تقول،

156
00:13:42,585 --> 00:13:50,770
«يجب أن يحتوي رقم الهاتف على أرقام فقط.»

157
00:13:50,910 --> 00:13:58,070
لذلك، هذه هي الرسالة الأخرى، وبالمثل للبريد الإلكتروني.

158
00:13:58,070 --> 00:14:03,109
لذلك، كما ترون القيم التي أستخدمها هنا

159
00:14:03,109 --> 00:14:08,430
هي المقابلة لأسماء المدقق التي استخدمتها،

160
00:14:08,430 --> 00:14:12,305
«منتصف الطول»، «الحد الأقصى للطول المطلوب»، «نمط».

161
00:14:12,305 --> 00:14:14,280
لذلك، وبالمثل بالنسبة للبريد الإلكتروني،

162
00:14:14,280 --> 00:14:18,720
سترى «مطلوب» و «البريد الإلكتروني».

163
00:14:18,720 --> 00:14:28,615
لذلك، أنا فقط ذاهب لنسخ «مطلوب» أكثر من هنا ويقول، «البريد الإلكتروني مطلوب».

164
00:14:28,615 --> 00:14:36,020
النمط الآخر كما تتذكر هو للبريد الإلكتروني وأود أن أقول،

165
00:14:36,020 --> 00:14:40,865
«البريد الإلكتروني ليس في شكل صالح».

166
00:14:40,865 --> 00:14:43,200
لذلك، عادة إذا كان بريدك الإلكتروني لا

167
00:14:43,200 --> 00:14:48,190
يحتوي على علامة @ وحروف على جانبي علامة @،

168
00:14:48,190 --> 00:14:50,230
فهذا ليس بريدًا إلكترونيًا صالحًا.

169
00:14:50,230 --> 00:14:58,265
تم تضمين هذا البريد الإلكتروني المدقق بالفعل في وحدة النماذج التفاعلية الزاوي.

170
00:14:58,265 --> 00:15:02,240
لذلك، سنستفيد من البريد الإلكتروني المدقق هنا.

171
00:15:02,240 --> 00:15:07,450
لذلك، هنا لدينا جميع رسائل التحقق من الصحة المحددة في التعليمات البرمجية.

172
00:15:07,450 --> 00:15:14,340
لذا، فإن ذلك يجعل من السهل جدًا توسيعها لحقول إضافية إذا كنت تحتاج

173
00:15:14,340 --> 00:15:17,770
وإضافة المزيد من رسائل التحقق من الصحة لعمليات التحقق الإضافية

174
00:15:17,770 --> 00:15:21,865
التي قد تقدمها لكل حقل من حقول النموذج هذه.

175
00:15:21,865 --> 00:15:25,785
أيضا، هذه الأخطاء شكل الكائن يساعدني على تتبع

176
00:15:25,785 --> 00:15:31,415
جميع الأخطاء المرتبطة بكل عنصر من العناصر في هاتفي.

177
00:15:31,415 --> 00:15:34,390
لذلك، أنا حاليا تحقق فقط هذه العناصر الأربعة،

178
00:15:34,390 --> 00:15:37,165
لذلك لهذا السبب لدي فقط لذلك.

179
00:15:37,165 --> 00:15:42,365
تصحيح طفيف، يجب أن يكون «منتصف الطول» دقيقة،

180
00:15:42,365 --> 00:15:45,910
صغيرة «l» والحد الأقصى للطول أيضا مع «l» صغير،

181
00:15:45,910 --> 00:15:48,140
وبالمثل بالنسبة للاسم الأخير أيضا.

182
00:15:48,140 --> 00:15:53,750
الآن، دعونا نكتب التعليمات البرمجية لطريقة تغيير القيم.

183
00:15:53,750 --> 00:15:55,765
لذلك، أنا ذاهب لكتابة الطريقة

184
00:15:55,765 --> 00:16:02,860
هنا، «ValueChanged» ومن ثم هذا

185
00:16:02,860 --> 00:16:08,275
سوف يستغرق في معلمة، ربما.

186
00:16:08,275 --> 00:16:10,900
هذا هو السبب في أنني وضعت علامة استفهام البيانات،

187
00:16:10,900 --> 00:16:16,760
وهذا يعني أن المعلمة اختيارية.

188
00:16:17,760 --> 00:16:27,610
لذلك، فإن أول شيء سوف تحقق هو، «هذا النموذج ردود الفعل»،

189
00:16:27,610 --> 00:16:32,290
مما يعني أنه إذا لم يتم إنشاء نموذج ردود الفعل ثم،

190
00:16:32,290 --> 00:16:34,960
وإذا تم استدعاء هذه الطريقة،

191
00:16:34,960 --> 00:16:42,130
ثم يجب عليك ببساطة «العودة» دون أي شيء.

192
00:16:42,130 --> 00:16:50,680
بعد ذلك، سأحدد

193
00:16:50,680 --> 00:16:56,780
ثابتًا يسمى «

194
00:16:56,780 --> 00:17:03,025
نموذج التعليقات هذا» هو فقط لتسهيل تحديد بقية الشفرة،

195
00:17:03,025 --> 00:17:05,380
ثم أود أن أقول، «

196
00:17:06,240 --> 00:17:16,330
لحقل const في هذه الأخطاء.

197
00:17:16,330 --> 00:17:21,510
لذلك، لاحظ أن هذا الحقل سوف تأخذ هذه الأخطاء.form،

198
00:17:21,510 --> 00:17:24,710
كائن أخطاء النموذج الذي حددناه في وقت سابق.

199
00:17:24,710 --> 00:17:28,150
لذلك، يشعر يعني أنني سوف تحقق من كل أربعة.

200
00:17:28,150 --> 00:17:29,890
لذلك، كلما اكتشفت أي تغييرات،

201
00:17:29,890 --> 00:17:31,260
الاسم الأول، الاسم الأخير،

202
00:17:31,260 --> 00:17:32,820
رقم الهاتف والبريد الإلكتروني.

203
00:17:32,820 --> 00:17:41,080
لذلك، هذا هو السبب في أن هؤلاء الأربعة سوف تحمل نفس الأسماء بالضبط كما استخدمناها في النموذج هنا،

204
00:17:41,080 --> 00:17:50,330
وحتى أن التعليمات البرمجية المكتوبة هنا سوف تكون مباشرة للعمل مع.

205
00:17:52,770 --> 00:17:56,650
لذلك، أنا ذاهب الآن للتحقق من حقول النموذج.

206
00:17:56,650 --> 00:18:07,090
ثم، أود أولا

207
00:18:07,090 --> 00:18:16,000
التأكد من أنه في حال قمت في وقت سابق بإرفاق أي رسائل إلى حقول النموذج هذه،

208
00:18:16,000 --> 00:18:17,810
شكل أخطاء الكائن هناك،

209
00:18:17,810 --> 00:18:19,665
ثم أنا ذاهب لمسح كل منهم.

210
00:18:19,665 --> 00:18:23,830
لذلك، لهذا السبب إذا قمت باستدعاء هذا بدون معلمة،

211
00:18:23,830 --> 00:18:26,600
فسيتم مسح جميع حقول خطأ النموذج،

212
00:18:26,600 --> 00:18:36,335
ثم سأفعل، «التحكم في FormGet».

213
00:18:36,335 --> 00:18:44,330
لذلك، لاحظ أنني أستخدم هذا الحقل نفسه للقيام فورماجيت لذلك،

214
00:18:44,330 --> 00:18:48,530
أنا الحصول على الوصول إلى هذا الحقل نموذج معين.

215
00:18:48,530 --> 00:18:52,090
لذلك، لاحظ أنه في وقت سابق كنا نفعل «feedbackform.this.feedbackform.get" firstname».

216
00:18:58,930 --> 00:19:04,870
وما إلى ذلك. لذا، قمت بتبسيط ما في هذا الثابت المحدد الذي

217
00:19:04,870 --> 00:19:13,000
حددناه هنا وبعد ذلك سأقول، «إذا كانت السيطرة».

218
00:19:13,000 --> 00:19:22,645
لذلك، مما يعني أنه إذا كانت السيطرة ليست فارغة و «control.dirt».

219
00:19:22,645 --> 00:19:28,150
لذلك، إذا كان هذا الحقل المعين قذرًا بالفعل

220
00:19:28,150 --> 00:19:33,635
وليس «التحكم صالح».

221
00:19:33,635 --> 00:19:36,280
لذا، يعني أنه لكل حقل من الحقول،

222
00:19:36,280 --> 00:19:39,780
أقوم بالتحقق حرفياً لمعرفة ما إذا كان صالحًا،

223
00:19:39,780 --> 00:19:40,840
إذا كان قذرًا،

224
00:19:40,840 --> 00:19:44,260
ثم إذا كان عنصر التحكم موجودًا بالفعل.

225
00:19:44,260 --> 00:19:48,430
ثم، أنا ذاهب للتحقق لمعرفة أي نوع من الأخطاء تمت إضافتها إلى

226
00:19:48,430 --> 00:19:53,185
هذا التحكم معين من قبل النموذج هناك.

227
00:19:53,185 --> 00:19:55,045
لذلك، هنا سأقول،

228
00:19:55,045 --> 00:19:59,500
«رسائل const

229
00:19:59,500 --> 00:20:06,560
تساوي حقل رسائل validation هذا».

230
00:20:07,260 --> 00:20:10,635
لاحظ كيف أنا التقاط

231
00:20:10,635 --> 00:20:15,785
جميع رسائل التحقق من الصحة المقابلة لهذا الحقل معين الاسم الأول،

232
00:20:15,785 --> 00:20:19,370
اسم العائلة، أو telnum أو البريد الإلكتروني،

233
00:20:19,370 --> 00:20:23,585
وبعد ذلك سوف تحقق ومعرفة ما إذا كنت بحاجة إلى إضافة هذا في الحقل.

234
00:20:23,585 --> 00:20:25,050
إذاً، كيف أفعل ذلك؟

235
00:20:25,050 --> 00:20:35,360
لذلك، نحن نفعل مفتاح كونست في control.errors.

236
00:20:35,360 --> 00:20:45,510
لذلك، لاحظ أن عنصر التحكم هذا هو form.get field و.error،

237
00:20:45,510 --> 00:20:48,980
لذلك أنا التحقق لمعرفة ما إذا كان هناك أي أخطاء هناك.

238
00:20:48,980 --> 00:20:51,370
ثم، في هذه الحالة،

239
00:20:51,370 --> 00:20:58,485
سأضيف حقل أخطاء النموذج هذا.

240
00:20:58,485 --> 00:21:06,285
لذلك، بالنسبة لهذا العنصر المحدد في كائن جافا سكريبت الذي قمت بتعريفه هنا،

241
00:21:06,285 --> 00:21:13,180
أود إضافة مفتاح الرسائل

242
00:21:13,180 --> 00:21:21,135
بالإضافة إلى الفضاء هنا.

243
00:21:21,135 --> 00:21:24,590
لذلك، الآن أي مسح خطأ النموذج

244
00:21:24,590 --> 00:21:27,555
أو الرسالة المقابلة سيتم اتخاذها وإرفاقها،

245
00:21:27,555 --> 00:21:32,350
وبعد ذلك سوف يحتوي كائن جافا سكريبت أخطاء النموذج الخاص بي الآن على

246
00:21:32,350 --> 00:21:34,970
جميع رسائل الخطأ المرفقة معا عندما

247
00:21:34,970 --> 00:21:39,780
هذا معين على القيم تغيير الفئران الأسلوب.

248
00:21:39,780 --> 00:21:44,430
الآن، هذه القطعة الخاصة من التعليمات البرمجية لقد اقترضت من

249
00:21:44,430 --> 00:21:50,560
وثائق التحقق من صحة النموذج على angular.iu.

250
00:21:50,560 --> 00:21:55,240
لقد وجدت أن هذه طريقة بديهية للغاية للقيام بالتحقق من أخطاء النموذج.

251
00:21:55,240 --> 00:22:02,195
لذلك، فكرت لماذا لا تستفيد من ذلك في ممارسة الأشكال التفاعلية الزاوي.

252
00:22:02,195 --> 00:22:05,515
لذلك، إضافة هذا الرمز هناك.

253
00:22:05,515 --> 00:22:15,180
الآن، طلبي جاهز لإجراء التحقق من صحة النموذج لنموذج رد الفعل الخاص بي.

254
00:22:15,180 --> 00:22:22,500
لذلك، الآن الخطوة التالية هي الانتقال إلى component.html جهة الاتصال،

255
00:22:22,500 --> 00:22:25,805
ملف القالب، ثم قم بتحديث ملف القالب.

256
00:22:25,805 --> 00:22:28,505
لذلك، انتقل إلى ملف القالب هذا،

257
00:22:28,505 --> 00:22:31,275
سنذهب الآن إلى النموذج،

258
00:22:31,275 --> 00:22:39,100
وفي هذا النموذج الآن بدلاً من القيام بكل هذه الشيكات في التعليمات البرمجية،

259
00:22:39,920 --> 00:22:48,165
يمكننا الآن تبسيط الكثير من التعليمات البرمجية هنا في ملف القالب هنا.

260
00:22:48,165 --> 00:22:50,550
الآن، بدلاً من القيام بكل هذه الفحوصات،

261
00:22:50,550 --> 00:22:56,065
ما ندركه هو أن كائن جافا سكريبت أخطاء النموذج في

262
00:22:56,065 --> 00:23:00,270
ملف typescript الخاص بي إذا كانت هناك أخطاء،

263
00:23:00,270 --> 00:23:05,610
فإن كائن JavaScript الخاص بأخطاء النموذج لهذا الحقل المعين،

264
00:23:05,610 --> 00:23:10,125
سيكون له كل رسائل الخطأ المرفقة به.

265
00:23:10,125 --> 00:23:11,460
إذا لم تكن هناك أخطاء،

266
00:23:11,460 --> 00:23:14,505
فلن تكون رسائل الخطأ هذه موجودة.

267
00:23:14,505 --> 00:23:17,860
لذلك، هذا هو ما سأستخدمه للتحقق

268
00:23:17,860 --> 00:23:21,245
ومعرفة ما إذا كان يجب عرض خطأ النموذج أم لا.

269
00:23:21,245 --> 00:23:24,685
لذلك، لهذه المسألة بدلا من التحقق من كل هذا،

270
00:23:24,685 --> 00:23:34,740
الشيء الوحيد الذي أحتاج إلى التحقق هنا هو فورميرورس الاسم الأول، هذا كل شيء.

271
00:23:34,740 --> 00:23:40,450
لذلك، من السهل جدا للتحقق من وجود أخطاء هنا.

272
00:23:41,110 --> 00:23:47,095
وبالمثل، حتى يتم تبسيط هذا الرمز كله الآن هنا،

273
00:23:47,095 --> 00:23:52,100
وبالمثل عند التحقق من الرسالة هنا،

274
00:23:52,100 --> 00:23:56,615
ما سنقوم به، وأنا ذاهب لتغيير هذا الشيء كله من

275
00:23:56,615 --> 00:24:05,165
المطلوب لمست إلى formerrors.firstName.

276
00:24:05,165 --> 00:24:08,955
هذا كل شيء إذا كان ذلك موجودًا،

277
00:24:08,955 --> 00:24:14,760
فستكون جميع رسائل الخطأ المقابلة لهذا موجودة بالفعل،

278
00:24:14,760 --> 00:24:19,620
لذلك أحتاج فقط إلى إجراء الاستيفاء

279
00:24:19,620 --> 00:24:26,555
ثم عرض Formerrors.firstName هنا،

280
00:24:26,555 --> 00:24:28,385
بهذه البساطة.

281
00:24:28,385 --> 00:24:30,240
الآن، ترى من خلال القيام

282
00:24:30,240 --> 00:24:36,355
بجميع التحقق من صحة خطأ النموذج ورمز والقيام بجميع الشيكات وهلم جرا في التعليمات البرمجية،

283
00:24:36,355 --> 00:24:40,200
كنت قد بنيت بالفعل رسائل الخطأ التي نحتاج إلى عرضها.

284
00:24:40,200 --> 00:24:42,740
كل ما نقوم به هو أن نأخذ رسالة الخطأ هذه ثم نضع

285
00:24:42,740 --> 00:24:45,745
هذا في القالب هنا، هذا كل شيء.

286
00:24:45,745 --> 00:24:50,105
يصبح رمز القالب أكثر تبسيطًا في هذه الحالة بالذات،

287
00:24:50,105 --> 00:24:57,225
وأيضًا من خلال إجراء التحقق من صحة النموذج باستخدام شفرة typescript،

288
00:24:57,225 --> 00:25:02,045
قمنا بتبسيط القالب هنا في نفس الوقت يمكننا إجراء

289
00:25:02,045 --> 00:25:09,165
التحقق من صحة النموذج الأكثر تعقيدًا في شفرة typescript الخاصة بنا.

290
00:25:09,165 --> 00:25:16,500
أنا ذاهب للمضي قدما والقيام بنفس النوع من التغييرات على الحقول المتبقية هنا،

291
00:25:16,500 --> 00:25:20,460
وذلك لحقل اسم العائلة،

292
00:25:20,460 --> 00:25:30,850
وأنا ذاهب إلى استبدال مرة أخرى كل هذا مع Formerrors.lastName.

293
00:25:34,100 --> 00:25:41,050
الآن، مرة أخرى تفعل الشيء نفسه لرقم الهاتف.

294
00:25:41,330 --> 00:25:46,910
الآن، مرة أخرى كما ترون هيكل القالب يصبح جدا،

295
00:25:46,910 --> 00:25:50,230
موحدة جدا في هذه الحالة.

296
00:25:50,230 --> 00:25:55,020
لذا، هذه أيضًا طريقة أخرى لتبسيط

297
00:25:55,020 --> 00:26:01,660
بنية القالب الخاص بك مع الاستمرار في حقل البريد الإلكتروني هنا.

298
00:26:01,660 --> 00:26:06,640
سأقوم بنفس التغيير في حقل البريد الإلكتروني أيضًا.

299
00:26:06,640 --> 00:26:10,430
لذلك، أود أن أقول Formerrors.Email

300
00:26:12,470 --> 00:26:19,140
واستبدال هذا عن طريق formatters.email.

301
00:26:19,140 --> 00:26:20,995
كما ترون،

302
00:26:20,995 --> 00:26:28,455
فقد تم تبسيط رمز القالب الخاص بك بشكل ملحوظ مقارنة مع السابق.

303
00:26:28,455 --> 00:26:32,545
مع هذا

304
00:26:32,545 --> 00:26:36,600
تمت إضافة كل التحقق من صحة الخطأ الذي أطلبه إلى القالب الخاص بي ويتم تحديث القالب الخاص بي الآن،

305
00:26:36,600 --> 00:26:38,900
لذلك دعونا حفظ التغييرات.

306
00:26:39,560 --> 00:26:46,800
شيئان آخران أحتاج إلى إضافتهما هما سمة

307
00:26:46,800 --> 00:26:53,255
تسمى البريد الإلكتروني إلى هذا الحقل المحدد يسمى البريد الإلكتروني.

308
00:26:53,255 --> 00:26:56,625
لذلك، تذكر أننا أضفنا البريد الإلكتروني المدقق هنا.

309
00:26:56,625 --> 00:26:58,300
لذلك، جنبا إلى جنب مع المطلوب،

310
00:26:58,300 --> 00:27:03,655
وأنا ذاهب لإضافة البريد الإلكتروني أيضا إلى حقل الإدخال هنا.

311
00:27:03,655 --> 00:27:05,655
وبالمثل، بالنسبة للتلنوم،

312
00:27:05,655 --> 00:27:08,115
نستخدم النمط هناك.

313
00:27:08,115 --> 00:27:14,670
لذلك، أنا ذاهب لإضافة في نمط لذلك هذا هو حقل الإدخال ل telnum.

314
00:27:14,670 --> 00:27:24,485
لذا، داخل حقل الإدخال سأقوم بإضافة نمط يساوي

315
00:27:24,485 --> 00:27:29,250
والنمط الذي سأقوم بإضافته هو

316
00:27:29,250 --> 00:27:35,350
داخل أقواس مربعة صفر إلى تسعة،

317
00:27:35,350 --> 00:27:37,875
ثم وضع نجمة هناك.

318
00:27:37,875 --> 00:27:45,430
لذلك، مما يعني أن هذا هو أي شيء صفر إلى تسعة تكرار عدة مرات.

319
00:27:45,430 --> 00:27:51,045
لذلك، يمكن أن يحتوي رقم الهاتف على أي أرقام بين صفر وتسعة.

320
00:27:51,045 --> 00:27:53,370
أي عدد من تلك الأرقام

321
00:27:53,370 --> 00:27:57,085
يمكنك أيضًا وضع minlength و maxlength على حقل telnum

322
00:27:57,085 --> 00:28:01,100
إذا كان رقم الهاتف في بلدك الخاص يحتوي على تنسيق ثابت،

323
00:28:01,100 --> 00:28:02,440
فيمكنك القيام بذلك أيضًا.

324
00:28:02,440 --> 00:28:05,410
لذلك، يمكن القيام بذلك بسهولة.

325
00:28:05,410 --> 00:28:08,130
ولكن، في هذا التمرين،

326
00:28:08,130 --> 00:28:13,470
لم أضف في تقييد minlength و maxlength لـ telnum هنا.

327
00:28:13,470 --> 00:28:15,720
الآن، بعد أن قمنا بجميع التحديثات،

328
00:28:15,720 --> 00:28:23,150
دعونا حفظ التغييرات ثم نذهب ونلقي نظرة على النموذج في المتصفح.

329
00:28:23,150 --> 00:28:25,640
الذهاب إلى المتصفح الآن،

330
00:28:25,640 --> 00:28:28,920
دعونا التمرير لأسفل إلى النموذج هنا.

331
00:28:28,920 --> 00:28:34,775
دعونا نكتب في الاسم الأول وكما ترى عند كتابة حرف واحد فقط،

332
00:28:34,775 --> 00:28:38,290
ثم يتم عرض رسالة الخطأ على الفور،

333
00:28:38,290 --> 00:28:42,490
ولكن في اللحظة التي تكتب في أحرف إضافية سوف تختفي رسالة الخطأ.

334
00:28:42,490 --> 00:28:44,980
وبالمثل، للاسم الأخير.

335
00:28:44,980 --> 00:28:50,794
بالنسبة لرقم الهاتف، إذا حاولت كتابة أي شيء آخر غير الأرقام،

336
00:28:50,794 --> 00:28:53,830
فستعرض رسائل الخطأ.

337
00:28:54,240 --> 00:28:56,575
لذلك، يمكنك الكتابة،

338
00:28:56,575 --> 00:29:04,790
وبالمثل للبريد الإلكتروني، بحيث ترى أن البريد الإلكتروني غير صالح سيتم عرض تنسيق.

339
00:29:04,790 --> 00:29:10,380
إذا لم يكن لديك البريد الإلكتروني ثم يظهر أيضا رسالة الخطأ.

340
00:29:10,380 --> 00:29:14,415
ولكن، لحظة كتابة شيء من هذا القبيل،

341
00:29:14,415 --> 00:29:18,745
ثم يعتبر هذا تنسيق بريد إلكتروني صالح لذلك سيتم قبوله.

342
00:29:18,745 --> 00:29:23,895
لذلك، هذه هي مجموعة رسائل الخطأ والتحقق من صحة النموذج

343
00:29:23,895 --> 00:29:30,080
يتم تماما في التعليمات البرمجية كما هو الحال في هذا التمرين بالذات.

344
00:29:30,080 --> 00:29:33,625
لذلك، مع هذا، ونحن استكمال هذا التمرين.

345
00:29:33,625 --> 00:29:40,200
في هذا التمرين، رأينا استخدام تغيير القيمة يمكن ملاحظته،

346
00:29:40,200 --> 00:29:46,915
ورأينا أيضًا كيف يمكننا القيام بالتحقق من صحة النموذج في شفرة typescript الخاصة بنا.

347
00:29:46,915 --> 00:29:49,040
و هذا يكمل هذا التمرين.

348
00:29:49,040 --> 00:29:52,030
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع

349
00:29:52,030 --> 00:29:56,310
رسالة رد الفعل أشكال الجزء الثالث.