1
00:00:03,550 --> 00:00:08,265
مع فهم موجز للنماذج التفاعلية الزاوي،

2
00:00:08,265 --> 00:00:10,670
دعونا ننتقل إلى التمرين التالي.

3
00:00:10,670 --> 00:00:12,800
في هذا التمرين، سنقوم ببناء

4
00:00:12,800 --> 00:00:18,705
نموذج تفاعلي الزاوي في التطبيق الزاوي الذي كنا نعمل عليه حتى الآن.

5
00:00:18,705 --> 00:00:25,480
على طول الطريق، سوف نعزز فهمنا للأشكال التفاعلية الزاوي.

6
00:00:25,480 --> 00:00:28,435
للبدء في التمرين،

7
00:00:28,435 --> 00:00:31,560
فإن الخطوة الأولى التي نحتاج إلى القيام بها هي استيراد

8
00:00:31,560 --> 00:00:35,860
وحدة النماذج التفاعلية الزاوي إلى وحدة التطبيق الخاصة بنا.

9
00:00:35,860 --> 00:00:38,020
لذلك، دعونا نذهب إلى وحدة التطبيق،

10
00:00:38,020 --> 00:00:42,160
ومن ثم نرى أننا قد استوردت بالفعل وحدة النماذج في وقت سابق.

11
00:00:42,160 --> 00:00:46,540
سنقوم أيضًا باستيراد وحدة النماذج التفاعلية الزاوي.

12
00:00:46,540 --> 00:00:49,145
لذلك، سأقوم بنسخ ذلك، ولصق ذلك هنا،

13
00:00:49,145 --> 00:00:53,810
ثم قم بتغيير ذلك إلى وحدة النماذج التفاعلية الزاوي.

14
00:00:53,810 --> 00:00:57,770
بعد أن نفعل ذلك، نحن بحاجة أيضا إلى تضمين ذلك في الديكور لدينا.

15
00:00:57,770 --> 00:01:00,440
لذلك، النزول إلى الديكور هنا،

16
00:01:00,440 --> 00:01:05,235
وأنا ذاهب لاستيراد وحدة النماذج التفاعلية في الديكور.

17
00:01:05,235 --> 00:01:09,365
اثنين من الوحدات الأخرى التي نحن بحاجة إلى استيراد

18
00:01:09,365 --> 00:01:14,245
لنموذج لدينا هو ماتسليكتمودول، و ماتسليديتوغليمودول.

19
00:01:14,245 --> 00:01:19,035
تسمح لنا وحدة التحديد باستخدام عنصر التحديد،

20
00:01:19,035 --> 00:01:24,360
ويمكننا SlideToggle من استخدام تبديل الشريحة في نموذجنا.

21
00:01:24,360 --> 00:01:26,750
لذلك، للقيام بذلك، سنقوم كتابة في

22
00:01:26,750 --> 00:01:35,670
استيراد ماتسيلكتمودول من الزاوية/المادة/حدد،

23
00:01:36,890 --> 00:01:45,220
واستيراد ماتسليديتوغليمودول من الزاوية/المادة/الشريحة التبديل،

24
00:01:47,110 --> 00:01:55,195
وبعد ذلك نحن بحاجة إلى إضافتها إلى الديكور نغموديل لدينا في الواردات.

25
00:01:55,195 --> 00:01:57,145
لذلك، الذهاب إلى هناك،

26
00:01:57,145 --> 00:02:02,840
اسمحوا لي استيراد ماتسليكتمودول و ماتسليديتوغليمودول في هناك.

27
00:02:02,840 --> 00:02:04,685
لذا، مع هذه التغييرات، أصبحت

28
00:02:04,685 --> 00:02:08,240
وحدة التطبيق لدينا جاهزة الآن لتمكيننا

29
00:02:08,240 --> 00:02:13,465
من استخدام وحدة النماذج التفاعلية في تطبيقنا.

30
00:02:13,465 --> 00:02:14,920
في الخطوة التالية،

31
00:02:14,920 --> 00:02:22,105
ما سأقوم به هو إنشاء فئة هنا تسمى ردود الفعل.

32
00:02:22,105 --> 00:02:28,265
لذلك، سأقوم بإنشائه في المجلد المشترك في feedback.ts اسم الملف.

33
00:02:28,265 --> 00:02:34,790
الآن، هذه هي بنية الفئة التي تمثل

34
00:02:34,790 --> 00:02:38,210
نموذج البيانات المقابل لنموذج النموذج الذي

35
00:02:38,210 --> 00:02:41,840
سنستخدمه في تطبيق Angular الخاص بنا.

36
00:02:41,840 --> 00:02:50,620
لذلك، أنا إنشاء فئة اسمه ردود الفعل.

37
00:02:51,210 --> 00:02:53,500
ضمن فئة التعليقات،

38
00:02:53,500 --> 00:02:57,160
سأقوم بتضمين بعض الخصائص؛

39
00:02:57,970 --> 00:03:02,830
الاسم الأول، الاسم الأخير،

40
00:03:02,830 --> 00:03:10,730
ثم رقم الهاتف، Telnum، البريد الإلكتروني،

41
00:03:10,730 --> 00:03:20,440
ثم أوافق على أي متغير

42
00:03:20,440 --> 00:03:28,385
منطقي، خاصية منطقية، نوع الاتصال الذي هو من سلسلة النوع.

43
00:03:28,385 --> 00:03:31,730
سوف يصبح أكثر وضوحا بالنسبة لك لماذا أقوم بتضمين كل

44
00:03:31,730 --> 00:03:36,145
هذه عندما ننظر إلى تصميم النموذج نفسه.

45
00:03:36,145 --> 00:03:42,350
تتوافق فئة التغذية المرتدة هذه مع التعليقات التي

46
00:03:42,350 --> 00:03:48,045
يمكن للمستخدم تقديمها حول مطعمنا في تطبيق Angular الخاص بنا.

47
00:03:48,045 --> 00:03:51,800
لذا، هذا هو السبب في إنشاء فئة التعليقات هذه.

48
00:03:51,800 --> 00:03:55,865
سنقوم بتعيين هذا في نموذج النموذج في

49
00:03:55,865 --> 00:04:00,650
أحد المكونات هناك، وكذلك مع ذلك،

50
00:04:00,650 --> 00:04:05,920
سأقوم بتصدير ثابت وهو عبارة عن مصفوفة سلسلة تسمى

51
00:04:05,920 --> 00:04:12,380
contacttype والتي كما

52
00:04:12,380 --> 00:04:19,410
ذكرت عبارة عن مصفوفة سلسلة تحتوي على ثلاث سلاسل هنا،

53
00:04:25,060 --> 00:04:29,460
لا شيء، Tel، والبريد الإلكتروني.

54
00:04:29,750 --> 00:04:34,875
لذلك، الآن لدينا هيكل نموذج البيانات جاهز.

55
00:04:34,875 --> 00:04:39,019
لذلك، في وقت لاحق عندما نقوم بتطوير جانب الخادم الخاص بنا،

56
00:04:39,019 --> 00:04:45,555
سنكون قادرين على تعيين هذا إلى بيانات نقوم بتخزينها على جانب الخادم.

57
00:04:45,555 --> 00:04:47,690
لذا، ضمن تطبيق Angular الخاص بنا،

58
00:04:47,690 --> 00:04:53,705
يشكل هذا نموذج البيانات الذي سنستخدمه لتطبيقنا تمامًا مثل الطبق

59
00:04:53,705 --> 00:04:58,850
، القائد، والترويج الذي قمنا بتطويره هذا هو فئة أخرى

60
00:04:58,850 --> 00:05:04,375
تمكننا من تجميع مجموعة من الخصائص معًا في فئة هنا.

61
00:05:04,375 --> 00:05:06,380
لذلك، بمجرد الانتهاء من ذلك،

62
00:05:06,380 --> 00:05:10,365
دعونا المضي قدما في إنشاء نموذج رد الفعل.

63
00:05:10,365 --> 00:05:16,095
سنقوم بإنشاء نموذج رد الفعل في مكون الاتصال لدينا.

64
00:05:16,095 --> 00:05:20,780
لذلك، دعونا نذهب إلى ملف component.ts جهة الاتصال،

65
00:05:20,780 --> 00:05:22,520
وأيضا سنقوم بتضمين

66
00:05:22,520 --> 00:05:26,400
النموذج المقابل في ملف قالب مكونات الاتصال.

67
00:05:26,400 --> 00:05:29,475
لذلك، في مكونات الاتصال نوع ملف البرنامج النصي،

68
00:05:29,475 --> 00:05:32,135
لذلك هذا هو المكان الذي سنقوم بإعداد النموذج

69
00:05:32,135 --> 00:05:35,555
لدينا كما رأينا نموذج رد الفعل بنيت

70
00:05:35,555 --> 00:05:43,265
في الغالب في التعليمات البرمجية ومن ثم تعيين بعد ذلك في عناصر النموذج في ملف القالب.

71
00:05:43,265 --> 00:05:49,360
لذلك، هنا أنا ذاهب لاستيراد بعض الطبقات.

72
00:05:49,360 --> 00:05:52,655
سأقوم باستيراد FormBuilder،

73
00:05:52,655 --> 00:06:00,055
ثم FormBuilder، والمصادقة.

74
00:06:00,055 --> 00:06:05,890
سيتم استخدام المصادقة للتحقق من صحة النموذج الذي سيكون في التمرين التالي،

75
00:06:05,890 --> 00:06:10,125
ولكن سأقوم باستيرادها في الوقت الحالي بالفعل.

76
00:06:10,125 --> 00:06:15,735
يتم استيراد هذه من مكتبة النماذج الزاوي.

77
00:06:15,735 --> 00:06:19,300
لذلك، بمجرد استيراد هذا،

78
00:06:19,300 --> 00:06:29,790
سنقوم باستيراد فئة التعليقات وثابت الاتصال

79
00:06:29,790 --> 00:06:38,360
من ملف التعليقات المشتركة/التعليقات

80
00:06:38,360 --> 00:06:41,415
الذي أنشأنا للتو في الخطوة السابقة.

81
00:06:41,415 --> 00:06:44,850
نحن بحاجة إلى هذا ضمن طلبنا.

82
00:06:44,850 --> 00:06:49,455
الآن، داخل صفي هنا،

83
00:06:49,455 --> 00:07:00,310
سأقوم بإعلان بعض المتغيرات تسمى FeedbackForm وهو من النوع FormGroup.

84
00:07:00,410 --> 00:07:07,475
هذا هو نموذج النموذج الذي سيستضيف

85
00:07:07,475 --> 00:07:11,960
نموذج رد

86
00:07:11,960 --> 00:07:17,270
الفعل هنا وبعد ذلك سوف أعلن أيضا ردود فعل متغيرة من نوع ردود الفعل،

87
00:07:17,270 --> 00:07:19,745
لذلك سيكون هذا نموذج البيانات المقابلة.

88
00:07:19,745 --> 00:07:27,930
في وقت لاحق على هذه القيمة ردود الفعل يمكن جلبها من خادم داخل التطبيق لدينا،

89
00:07:27,930 --> 00:07:34,205
وبعد ذلك أيضا سوف أعلن الاتصال كمتغير

90
00:07:34,205 --> 00:07:41,045
وهو من مجموعة سلسلة الاتصال.

91
00:07:41,045 --> 00:07:44,860
لأنني بحاجة إلى الاستفادة من هذا في طلبنا.

92
00:07:44,860 --> 00:07:48,675
لإنشاء نموذج رد الفعل داخل منشئ،

93
00:07:48,675 --> 00:07:58,605
وأود أن حقن فورمبويلدر في منشئ هنا،

94
00:07:58,605 --> 00:08:03,605
وأود أن إنشاء طريقة منفصلة تسمى

95
00:08:03,605 --> 00:08:08,950
كريتيفورم التي سوف استدعاء داخل منشئ،

96
00:08:08,950 --> 00:08:12,300
لذلك عندما يتم بناء هذه الفئة سيتم إنشاء النموذج.

97
00:08:12,300 --> 00:08:17,870
لذلك، فإن كريتيفورم يكون الأسلوب الذي سوف إنشاء النموذج الفعلي.

98
00:08:17,870 --> 00:08:24,060
لذلك، اسمحوا لي أن أضيف في طريقة كريتيفورم هنا.

99
00:08:24,060 --> 00:08:27,590
هذا هو مجرد راحة كنت قد قمت ببساطة

100
00:08:27,590 --> 00:08:31,250
بتضمين التعليمات البرمجية مباشرة في المنشئ نفسه،

101
00:08:31,250 --> 00:08:34,760
ولكن سترى أنه قد تكون هناك أسباب لماذا

102
00:08:34,760 --> 00:08:41,060
قد تحتاج إلى استدعاء هذا CreateForm من مواقع أخرى.

103
00:08:41,060 --> 00:08:47,240
لذلك، فمن الأفضل وضعه في طريقة منفصلة هنا.

104
00:08:47,240 --> 00:08:50,830
لذلك، سأقوم بإنشاء النموذج هنا، نموذج رد الفعل،

105
00:08:50,830 --> 00:08:56,775
ثم وضعه في متغير FeedBackForm الذي أعلنته في وقت سابق.

106
00:08:56,775 --> 00:08:58,335
لذلك، لإنشاء النموذج،

107
00:08:58,335 --> 00:09:02,215
وأنا ذاهب إلى اتخاذ مساعدة من فورمبولدر،

108
00:09:02,215 --> 00:09:05,145
فب التي أعلنتها في منشئ،

109
00:09:05,145 --> 00:09:10,760
ومن ثم فب يوفر طريقة تسمى المجموعة التي تسمح لي

110
00:09:10,760 --> 00:09:16,910
لتحديد مجموعة، فورمغروب هنا.

111
00:09:16,910 --> 00:09:23,040
لذلك، داخل هناك، الآن أنا ذاهب لبناء أجزاء من النموذج هناك.

112
00:09:23,040 --> 00:09:24,845
لذلك، داخل هذه المجموعة،

113
00:09:24,845 --> 00:09:28,775
الآن يمكنني تضمين عناصر تحكم النموذج المختلفة هناك.

114
00:09:28,775 --> 00:09:34,050
لذلك، أود أولا وضع الاسم الأول،

115
00:09:34,050 --> 00:09:44,200
ثم اسم العائلة.

116
00:09:45,910 --> 00:09:51,175
لاحظ كيف أن الحقول داخل النموذج الخاص بي

117
00:09:51,175 --> 00:09:56,460
تعكس عن كثب الحقول داخل فئة الملاحظات الخاصة بي.

118
00:09:56,460 --> 00:09:59,790
لا يجب أن تتطابق تمامًا، ولكن إذا كانت تتطابق،

119
00:09:59,790 --> 00:10:01,630
فإن نقل البيانات بين

120
00:10:01,630 --> 00:10:06,550
نموذج البيانات والنماذج الأربعة يصبح أكثر وضوحًا.

121
00:10:06,550 --> 00:10:12,500
Telnum الذي أنا ستعمل ترك 'السبب uh -

122
00:10:13,040 --> 00:10:15,800
لقد أضفت الاسم الأول، اسم العائلة،

123
00:10:15,800 --> 00:10:25,140
Telnum، البريد الإلكتروني، وأوافق، ونوع الاتصال،

124
00:10:25,550 --> 00:10:31,360
والتي سوف تعيين على أنها لا شيء للبدء.

125
00:10:31,360 --> 00:10:35,710
تذكر أن نوع جهة الاتصال عبارة عن مصفوفة سلسلة تحتوي على ثلاثة منها

126
00:10:35,710 --> 00:10:40,015
لذا يجب عليك اختيار واحد منهم ثم تعيينه في هذه الخاصية هنا.

127
00:10:40,015 --> 00:10:44,920
لذلك، سوف أختار هذا على أنه لا شيء ثم رسالة،

128
00:10:44,920 --> 00:10:49,120
والتي ستكون ردود الفعل التي يقدمها المستخدم حول

129
00:10:49,120 --> 00:10:53,605
مطعمنا الذي تم تعيينه في سلسلة هنا.

130
00:10:53,605 --> 00:10:59,765
لذا، هذه هي المجالات المختلفة التي ستشكل جزءًا من شكلنا هنا.

131
00:10:59,765 --> 00:11:04,370
لذلك، بمجرد أن يكون لدينا بنية النموذج في مكان هنا،

132
00:11:04,370 --> 00:11:07,525
لذلك لاحظت أنه عندما يتم استدعاء هذه الطريقة، سيكون

133
00:11:07,525 --> 00:11:12,455
هذا النموذج سيتم إنشاء النموذج التفاعلي في التعليمات البرمجية هنا.

134
00:11:12,455 --> 00:11:16,595
الآن، نحن بحاجة إلى تعيين هذا في وجهة النظر،

135
00:11:16,595 --> 00:11:17,900
في القالب هناك.

136
00:11:17,900 --> 00:11:21,470
لذا، سنقوم بذلك في الخطوة التالية.

137
00:11:21,470 --> 00:11:26,130
لذلك، الآن، انتقل إلى ملف القالب الخاص بنا،

138
00:11:26,130 --> 00:11:31,415
في ملف قالب مكون الاتصال،

139
00:11:31,415 --> 00:11:36,159
سنقوم بالتمرير لأسفل ثم قم بتضمين هذا في

140
00:11:36,159 --> 00:11:42,910
ملف القالب الخاص بنا مباشرة بعد هذا div هنا،

141
00:11:42,910 --> 00:11:50,325
لذلك لدينا هذا div في طريقة عرض الاتصال التي تحتوي على معلومات الموقع وهلم جرا.

142
00:11:50,325 --> 00:11:54,510
بعد ذلك مباشرة، سأقوم بإنشاء div آخر في

143
00:11:54,510 --> 00:11:59,820
داخله سنقوم باستضافة النموذج التفاعلي هناك.

144
00:11:59,820 --> 00:12:17,720
اسمحوا لي أن أطبق بعض الأشياء تخطيط المرن

145
00:12:17,720 --> 00:12:19,100
هنا إلى div الخاص بي.

146
00:12:19,100 --> 00:12:22,110
الآن، يجب أن يكون حجم النموذج هذا كما ترون

147
00:12:22,110 --> 00:12:25,905
فئة CSS سأقوم بإنشائها بعد ذلك بقليل.

148
00:12:25,905 --> 00:12:31,540
داخل هذا div، سأقوم باستضافة النموذج الخاص بي.

149
00:12:31,540 --> 00:12:36,680
لذلك، بمجرد أن أضع هذا div في ملف القالب الخاص بي،

150
00:12:36,680 --> 00:12:40,180
اسمحوا لي الآن أن أبدأ مع عنوان لهذا.

151
00:12:40,180 --> 00:12:47,675
لذا، سنقول، «أرسل لنا ملاحظاتك».

152
00:12:47,675 --> 00:12:54,250
لذلك، كنت تبحث عن ردود الفعل من الزوار إلى موقعك.

153
00:12:54,950 --> 00:12:58,050
سنبدأ في بناء النموذج.

154
00:12:58,050 --> 00:13:03,200
لذلك، اسمحوا لي أن أبدأ مع علامة النموذج

155
00:13:03,200 --> 00:13:08,275
هنا وبعد ذلك سنقوم ببناء النموذج داخل علامة النموذج هذه هنا.

156
00:13:08,275 --> 00:13:12,180
لذلك، بالنسبة للنموذج، فإن أول شيء سأقوم به هو تطبيق

157
00:13:12,180 --> 00:13:16,535
عدم التحقق لأنه سيتم الاعتناء بالتحقق من الصحة بواسطة الزاوي،

158
00:13:16,535 --> 00:13:21,380
ثم تطبيق مجموعة نموذج هنا أيضًا.

159
00:13:21,380 --> 00:13:38,060
لذا، لاحظ أن مجموعة النماذج هذه هي المجموعة التي ستربطني بنموذج النموذج

160
00:13:38,060 --> 00:13:40,555
التفاعلي الذي قمت بإنشائه في شفرتي هنا.

161
00:13:40,555 --> 00:13:42,380
لذلك، من خلال القيام بذلك،

162
00:13:42,380 --> 00:13:47,255
نحن ربط في هذا النموذج التفاعلي في القالب إلى

163
00:13:47,255 --> 00:13:53,680
نموذج النموذج المقابل في ملف typescript لدينا هناك.

164
00:13:53,680 --> 00:13:59,100
لذا، فإن الطريقة التي نقوم بها هي أن نعلن عن نموذج مجموعة النموذج ونموذج التغذية المرتدة.

165
00:13:59,100 --> 00:14:00,910
سوف تظهر لك كيفية ربط

166
00:14:00,910 --> 00:14:04,840
عناصر النموذج المتبقية

167
00:14:04,840 --> 00:14:09,315
إلى الخصائص المقابلة في نموذج النموذج في فترة قصيرة.

168
00:14:09,315 --> 00:14:11,325
لذلك، بعد أن نفعل ذلك،

169
00:14:11,325 --> 00:14:20,480
دعونا نضع عناصر شكلنا في مكانها داخل نموذج النموذج هذا.

170
00:14:20,480 --> 00:14:24,490
لذلك، سوف أعلن P حول هنا ثم داخل هناك

171
00:14:24,490 --> 00:14:28,860
سأستخدم حقل شكل الحصيرة هنا،

172
00:14:28,860 --> 00:14:35,475
والذي سأطبق عليه فئة CSS تسمى نصف العرض،

173
00:14:35,475 --> 00:14:39,600
وأغلق هذا.

174
00:14:39,600 --> 00:14:45,195
لذلك، هذا من شأنه أن يضع أول شكل تحكم في مكانه هنا.

175
00:14:45,195 --> 00:14:55,930
لذا، هنا، سأضع الإدخال ثم أطبق MatInput من المادة الزاوي هنا.

176
00:14:56,930 --> 00:15:03,530
لربط هذا في الخاصية داخل نموذج النموذج الخاص بي،

177
00:15:03,530 --> 00:15:08,630
سأحتاج إلى القيام فورمكونترولنام،

178
00:15:09,980 --> 00:15:14,650
وأول واحد هو الاسم الأول.

179
00:15:14,650 --> 00:15:20,370
لذا، بهذه الطريقة، يتم ربط هذا الإدخال الآن بخاصية الاسم الأول

180
00:15:20,370 --> 00:15:26,015
التي قمت بتعريفها داخل نموذج النموذج الخاص بي الذي قمت بتعريفه في الشفرة.

181
00:15:26,015 --> 00:15:29,680
الاسم الأول، ثم سأقوم بتعريف

182
00:15:29,680 --> 00:15:37,900
العنصر النائب كاسم أول.

183
00:15:37,900 --> 00:15:39,970
لذلك، كما تتوقع،

184
00:15:39,970 --> 00:15:43,685
سيتم استخدام حقل الإدخال هذا لكتابة

185
00:15:43,685 --> 00:15:51,215
الاسم الأول من قبل المستخدم، اكتب النص.

186
00:15:51,215 --> 00:15:56,935
ومن المثير للاهتمام، ترى أننا لا نملك نموذج ng هنا

187
00:15:56,935 --> 00:16:02,950
أو أي من متغيرات القالب وهلم جرا في شكلي بعد الآن.

188
00:16:02,950 --> 00:16:05,945
أشكال رد الفعل تعمل بشكل مختلف.

189
00:16:05,945 --> 00:16:08,480
لذلك، كما ترى في النماذج

190
00:16:08,480 --> 00:16:11,975
التفاعلية، يمكنك تعيين مجموعة النماذج ثم حاول أسماء عنصر تحكم النموذج.

191
00:16:11,975 --> 00:16:16,095
إذا كنت تقوم بإنشاء عناصر تحكم النموذج مع فئة التحكم في النموذج،

192
00:16:16,095 --> 00:16:20,440
فستعلن هذا كعنصر تحكم في النموذج داخل أقواس مربعة ثم

193
00:16:20,440 --> 00:16:24,910
تطابقه مع عنصر تحكم النموذج المطابق الذي تقوم بإنشائه في النوع الخاص بك متشككا.

194
00:16:24,910 --> 00:16:28,940
ولكن الآن بما أننا نستخدم منشئ النماذج،

195
00:16:28,940 --> 00:16:33,280
فأنا بحاجة فقط إلى التعادل في مجموعة النماذج مثل

196
00:16:33,280 --> 00:16:38,605
هذا في النموذج الخاص بي إلى نموذج النموذج المقابل،

197
00:16:38,605 --> 00:16:39,890
ثم بقية منهم،

198
00:16:39,890 --> 00:16:42,690
أعلن كاسم عنصر تحكم النموذج ثم مطابقتها إلى

199
00:16:42,690 --> 00:16:45,085
الخصائص المقابلة في

200
00:16:45,085 --> 00:16:48,995
نموذج التحكم أن لدي في بلدي typescript طريقة التعليمات البرمجية.

201
00:16:48,995 --> 00:16:53,950
لذلك، سيؤدي هذا إلى إنشاء حقل الاسم الأول هناك.

202
00:16:53,950 --> 00:16:56,400
دعني أنسخ هذا

203
00:16:56,400 --> 00:17:00,150
أحتاج إلى اسم عائلي هنا

204
00:17:00,150 --> 00:17:07,005
لذا، سأقوم بنسخ هذا ثم أقول اسم عنصر التحكم في النموذج هو اسم العائلة،

205
00:17:07,005 --> 00:17:10,510
والعنصر النائب هو اسم العائلة،

206
00:17:10,510 --> 00:17:12,550
ومن النوع، النص، هنا.

207
00:17:12,550 --> 00:17:18,975
كان لي الاسم

208
00:17:18,975 --> 00:17:24,970
الأول، وكان لي اسم العائلة وإذا نظرتم إلى نموذج التحكم في النموذج،

209
00:17:24,970 --> 00:17:27,400
سترى أنه بعد الاسم الأول واسم العائلة،

210
00:17:27,400 --> 00:17:31,770
لدي رقم الهاتف كالرقم التالي،

211
00:17:31,770 --> 00:17:34,325
لذلك سأقوم بلصق هذا هنا.

212
00:17:34,325 --> 00:17:38,390
ثم، اسم عنصر تحكم النموذج هنا هو Telnum،

213
00:17:38,390 --> 00:17:46,920
والعنصر النائب هو رقم الهاتف،

214
00:17:46,920 --> 00:17:51,405
والنوع هو Tel.

215
00:17:51,405 --> 00:17:53,385
بينما نحن في ذلك،

216
00:17:53,385 --> 00:17:59,905
وسوف ربط في المطلوبة في هذه على الرغم من أن هذا ليس مطلوبا حقا.

217
00:17:59,905 --> 00:18:08,275
ولكن اسمحوا لي أن أضيف ذلك هناك.

218
00:18:08,275 --> 00:18:11,920
الآن، رقم الهاتف ثم لدي البريد الإلكتروني.

219
00:18:11,920 --> 00:18:20,679
لذا، فإن الحقل التالي هو البريد الإلكتروني،

220
00:18:25,520 --> 00:18:32,100
والعنصر النائب هو البريد الإلكتروني،

221
00:18:32,100 --> 00:18:35,510
والنوع أيضًا.

222
00:18:35,510 --> 00:18:38,600
لذلك، الآن لدي أولا،

223
00:18:38,600 --> 00:18:41,610
اسم العائلة، ورقم الهاتف، والبريد الإلكتروني.

224
00:18:41,610 --> 00:18:52,820
الشيء التالي الذي سأقوم بإضافته هو تبديل الشريحة.

225
00:18:53,850 --> 00:18:56,600
في وقت سابق نستخدم مربع الاختيار.

226
00:18:56,600 --> 00:19:03,240
إن slidetoggle هو عنصر تحكم آخر في شكل المادة الزاوي،

227
00:19:03,240 --> 00:19:07,150
والذي يختلف إلى حد ما عن مربع الاختيار،

228
00:19:07,150 --> 00:19:11,480
واعتقدت أنني سوف أوضح لك باستخدامه في النموذج هنا.

229
00:19:11,480 --> 00:19:18,680
الآن، هذا هو المكان الذي سأستخدم فيه جدول لوضع هذه العناصر.

230
00:19:19,890 --> 00:19:22,300
والسبب هو أن

231
00:19:22,300 --> 00:19:25,520
هذه العناصر يصعب وضعها دون استخدام جدول.

232
00:19:25,520 --> 00:19:27,605
لذلك، داخل الجدول،

233
00:19:27,605 --> 00:19:31,740
أنا متأكد من أنك تعرف جميعا كيفية استخدام الجدول،

234
00:19:35,280 --> 00:19:39,740
حاولت وضعها باستخدام

235
00:19:39,740 --> 00:19:44,970
تخطيط المرن القياسية ولم تكن ناجحة جدا مع ذلك.

236
00:19:44,970 --> 00:19:50,510
لذلك، بدلا من ذلك لجأت إلى استخدام جدول لوضع هذين العنصرين في النموذج الخاص بي.

237
00:19:50,510 --> 00:19:54,350
لذا، تبديل الحصيرة المنزلقة.

238
00:19:54,350 --> 00:19:57,680
لذا، فإن slidetoggle يشبه مربع الاختيار،

239
00:19:57,680 --> 00:20:00,390
يمكنك تشغيله وإيقافه،

240
00:20:00,390 --> 00:20:04,550
وهذا مسموح به لتحديد قيمة منطقية هنا.

241
00:20:04,550 --> 00:20:14,200
لذلك، سليديتوغل و فورمكونترولنام توافق.

242
00:20:14,200 --> 00:20:16,140
إذا كنت تتذكر، كان لدينا اتفاق،

243
00:20:16,140 --> 00:20:22,925
الذي كان خاصية منطقية في عنصر تحكم النموذج.

244
00:20:22,925 --> 00:20:25,735
ثم، لهذا، أود أن أقول، هل

245
00:20:25,735 --> 00:20:29,340
يمكن أن نتصل بك؟

246
00:20:29,340 --> 00:20:35,140
الآن، سوف تصبح أكثر وضوحا بالنسبة لك عندما ترى النسخة النهائية من

247
00:20:35,140 --> 00:20:43,060
هذا النموذج لفهم سبب قيامنا بذلك.

248
00:20:43,060 --> 00:20:49,895
الآن، سنضع كل الأجزاء في شكلي التفاعلي هنا

249
00:20:49,895 --> 00:20:55,925
الجزء الثاني أنا ذاهب لاستخدام اختيار،

250
00:20:55,925 --> 00:21:03,920
وهو مدعوم من خلال عنصر اختيار حصيرة في المواد الزاوي.

251
00:21:03,920 --> 00:21:12,460
لذا، حدد MD ولهذا العنصر النائب،

252
00:21:13,520 --> 00:21:21,690
سأعرّف بأنه «كيف؟» ،

253
00:21:21,690 --> 00:21:27,580
و فورمكونترولنام الذي أنا ذاهب لربط هذا هو

254
00:21:27,580 --> 00:21:37,650
«كونتاكتيبي» وإغلاق مد حدد.

255
00:21:37,650 --> 00:21:41,720
لذلك، هذا يسمح لي بإنشاء عنصر تحديد في النموذج الخاص بي.

256
00:21:41,720 --> 00:21:44,660
لذا، فإن عنصر التحديد هو شيء

257
00:21:44,660 --> 00:21:48,535
يعطيني قائمة سحب يمكن من خلالها تحديد واحد منهم.

258
00:21:48,535 --> 00:21:50,905
لذلك، لإنشاء القائمة المنسدلة،

259
00:21:50,905 --> 00:22:00,510
سأستخدم خيار الحصيرة المتاح كمكون في المادة الزاوي.

260
00:22:00,510 --> 00:22:05,035
لذلك، يتم تضمين خيار الحصيرة داخل اختيار الحصيرة.

261
00:22:05,035 --> 00:22:06,810
لذلك، بالنسبة للخيار،

262
00:22:06,810 --> 00:22:09,570
سأقوم بعمل* ngFor،

263
00:22:09,570 --> 00:22:17,070
وأنا متأكد من أنك تتذكر التوجيه ngFor من وقت سابق،

264
00:22:17,070 --> 00:22:24,750
* ngFor «السماح ctype من ContactType».

265
00:22:24,750 --> 00:22:28,360
الآن، ترى لماذا أعلنت متغير نوع الاتصال في

266
00:22:28,360 --> 00:22:44,740
التعليمات البرمجية الخاصة بي في وقت سابق ومن ثم أود أن أقول، [value] = «ctype».

267
00:22:44,740 --> 00:23:00,840
لذا، أقوم بإعداد خياري في اختياري هنا واستخدام الاستيفاء،

268
00:23:00,840 --> 00:23:03,040
سأكتب ctype هنا.

269
00:23:03,040 --> 00:23:10,100
لذا، سيعطيني ذلك قائمة الخيار المنسدلة في النموذج الخاص بي هناك.

270
00:23:10,100 --> 00:23:14,665
لذلك، هذا هو الجزء التالي ثم أخيرا،

271
00:23:14,665 --> 00:23:21,270
بعد الجدول، وأنا ذاهب لوضع في منطقة النص هنا.

272
00:23:21,270 --> 00:23:31,320
لذلك، أود أن أقول ص وإغلاق أن P. لتصميم شكل رد الفعل،

273
00:23:31,320 --> 00:23:35,395
عنصر P يسمح لي لوضع العناصر بشكل صحيح.

274
00:23:35,395 --> 00:23:37,580
لذلك، هذا هو السبب في أنني أستخدم ذلك.

275
00:23:37,580 --> 00:23:42,380
لذا، كما تتذكر،

276
00:23:42,540 --> 00:23:48,740
يسمح لي حقل شكل الحصيرة

277
00:23:48,740 --> 00:23:56,239
بتضمين حاوية إدخال هنا ثم داخل هناك سأقوم بتعريف منطقة نص،

278
00:23:56,239 --> 00:24:00,310
والتي أقوم بتطبيق

279
00:24:00,310 --> 00:24:08,650
توجيه MatInput على ذلك.

280
00:24:08,650 --> 00:24:15,460
ثم، فورمكونترولنام، وأنا ذاهب لإعطاء ك «رسالة».

281
00:24:15,460 --> 00:24:23,290
لذلك، هذا العنصر شكل معين يسمح للمستخدم لكتابة

282
00:24:23,290 --> 00:24:31,305
في رسالة ردود الفعل لمطعمي.

283
00:24:31,305 --> 00:24:37,100
لذا، العنصر النائب «ملاحظاتك»،

284
00:24:37,100 --> 00:24:42,610
ثم سأعطي مساحة النص حجم

285
00:24:42,610 --> 00:24:51,245
12 صفًا هنا ثم أغلق منطقة النص.

286
00:24:51,245 --> 00:24:58,005
لذلك، هنا لدينا منطقة نص مع 12 الصفوف.

287
00:24:58,005 --> 00:25:03,350
لذلك، هذا يكمل معظم النموذج.

288
00:25:03,350 --> 00:25:07,910
آسف، هذا يَجِبُ أَنْ يَكُونَ خارج المنضدةِ.

289
00:25:08,070 --> 00:25:11,830
نحن بحاجة إلى زر لإرسال النموذج.

290
00:25:11,830 --> 00:25:20,755
لذلك، هناك حق، وسوف تشمل زر من نوع = «إرسال»

291
00:25:20,755 --> 00:25:24,155
وهذا الزر إرسال سوف تطبيق

292
00:25:24,155 --> 00:25:32,270
زر الحصيرة وأيضا تطبيق فئة = «الخلفية الأساسية».

293
00:25:33,600 --> 00:25:42,770
كنت قد رأيت لي تطبيق هذا على زر في التمرين السابق أيضا،

294
00:25:42,770 --> 00:25:45,740
نوع مماثل من زر.

295
00:25:45,740 --> 00:25:48,510
لذلك، الآن شكلي جاهز تقريبا.

296
00:25:48,510 --> 00:25:54,455
يمكنك إضافة بعض فئات CSS إلى مكون جهة الاتصال.

297
00:25:54,455 --> 00:25:58,725
الطبقات الثلاث التي استخدمتها هي عرض كامل،

298
00:25:58,725 --> 00:26:06,420
ويستخدم هذا لتعيين حجم العناصر هناك.

299
00:26:06,420 --> 00:26:10,980
لذلك، عرض كامل 95 في المئة، نصف العرض.

300
00:26:11,200 --> 00:26:17,565
لذلك، هذا يسمح لي لحجم العناصر بشكل صحيح،

301
00:26:17,565 --> 00:26:23,930
45 في المئة نصف العرض ثم حجم النموذج.

302
00:26:26,400 --> 00:26:32,740
لذلك، أستخدم فئات CSS هذه في النموذج الخاص بي.

303
00:26:32,740 --> 00:26:38,230
لذلك مع هذا، دعونا حفظ التغييرات،

304
00:26:38,460 --> 00:26:44,150
ونلقي نظرة سريعة على النموذج في طلبنا.

305
00:26:44,150 --> 00:26:45,915
الذهاب إلى المتصفح،

306
00:26:45,915 --> 00:26:48,725
في طريقة عرض جهة الاتصال

307
00:26:48,725 --> 00:26:54,210
، أثناء التمرير لأسفل، ترى الآن النموذج في مكانه في طريقة عرض جهة الاتصال هنا.

308
00:26:54,210 --> 00:26:57,660
لذلك، ترى ترسل لنا ملاحظاتك،

309
00:26:57,660 --> 00:27:01,985
الاسم الأول، الاسم الأخير، رقم الهاتف،

310
00:27:01,985 --> 00:27:06,695
البريد الإلكتروني و الشريحة التبديل هنا،

311
00:27:06,695 --> 00:27:12,395
لذلك ترى الشريحة التبديل في مكان هناك وبعد ذلك هذا هو هذا التحديد.

312
00:27:12,395 --> 00:27:15,650
اختيار يسمح لي لاختيار واحد من هذه الثلاثة.

313
00:27:15,650 --> 00:27:20,415
القيمة الافتراضية هي لا شيء ثم منطقة النص هنا،

314
00:27:20,415 --> 00:27:25,675
تسمح لي بكتابة تعليقات ملاحظاتي هنا ثم زر الإرسال.

315
00:27:25,675 --> 00:27:28,940
لذلك، هذا يكمل النموذج التفاعلي في

316
00:27:28,940 --> 00:27:32,690
طلبي ولكن عند النقر على زر إرسال،

317
00:27:32,690 --> 00:27:35,000
لن تتمكن من إرسال هذا النموذج.

318
00:27:35,000 --> 00:27:39,480
لذا، نحتاج إلى إضافة ngSubmit إلى النموذج الخاص بنا في القالب

319
00:27:39,480 --> 00:27:44,485
ثم إضافة طريقة في ملف البرنامج النصي الخاص بنا.

320
00:27:44,485 --> 00:27:47,185
الذهاب إلى التعليمات البرمجية لدينا،

321
00:27:47,185 --> 00:27:49,315
إلى النموذج هنا،

322
00:27:49,315 --> 00:27:53,830
جنبا إلى جنب مع نموذج novalidate FormGroup،

323
00:27:53,830 --> 00:28:01,670
وأنا ذاهب لإضافة في ngSubmit إلى النموذج.

324
00:28:02,730 --> 00:28:10,025
سأستدعي الطريقة كطريقة onSubmit.

325
00:28:10,025 --> 00:28:14,155
لذلك مع هذا، فإن النموذج الخاص بي جاهز الآن لتقديم المعلومات.

326
00:28:14,155 --> 00:28:17,195
أحتاج إلى الذهاب إلى مكونات جهة الاتصال،

327
00:28:17,195 --> 00:28:25,380
اكتب ملف البرنامج النصي ثم قم بإنشاء طريقة onSubmit هنا.

328
00:28:25,380 --> 00:28:28,420
لذلك، في طريقة

329
00:28:31,450 --> 00:28:37,030
onSubmit، يحدث ذلك أن نموذج النموذج هو بالضبط نفس نماذج البيانات،

330
00:28:37,030 --> 00:28:45,790
حتى أتمكن ببساطة من أخذ قيمة نموذج النموذج.

331
00:28:45,790 --> 00:28:49,840
لذلك، عندما يكون لديك نموذج نموذج مثل هذا النموذج ردود الفعل،

332
00:28:49,840 --> 00:28:54,410
نموذج ردود الفعل يعطي خاصية تسمى القيمة،

333
00:28:54,410 --> 00:29:00,020
والذي يسمح لي لاسترداد القيمة الحالية لكل هذه من نموذج ملاحظاتي.

334
00:29:00,020 --> 00:29:03,810
لذلك سوف يشكل هذا كائن جافا سكريبت،

335
00:29:03,810 --> 00:29:06,740
والذي يمكنني بعد ذلك تعيين في كائن جافا سكريبت ردود الفعل.

336
00:29:06,740 --> 00:29:10,170
يحدث ذلك، كل من هذه لديها بالضبط نفس الهيكل،

337
00:29:10,170 --> 00:29:11,690
ونموذج البيانات ونموذج النموذج.

338
00:29:11,690 --> 00:29:14,140
لذلك، هذا هو السبب في أنني قادرة على تحميل بسرعة في القيمة

339
00:29:14,140 --> 00:29:18,120
مباشرة في نموذج البيانات عندما يرسل المستخدم النموذج.

340
00:29:18,120 --> 00:29:21,120
إذا كان نموذج البيانات الخاص بك مختلفًا إلى حد ما عن نموذج النموذج،

341
00:29:21,120 --> 00:29:24,460
فستحتاج إلى التعيين في خصائص فردية بشكل صريح

342
00:29:24,460 --> 00:29:28,890
ويمكن القيام بذلك داخل هذه الطريقة هناك.

343
00:29:29,610 --> 00:29:36,455
فقط لتظهر لك أن النموذج يتم إرساله بشكل صحيح،

344
00:29:36,455 --> 00:29:44,760
سأقوم بتسجيل القيمة إلى وحدة التحكم، وحدة تحكم جافا سكريبت.

345
00:29:44,760 --> 00:29:50,200
ثم أود أن أقول، هذا. Feedbackform.Reset.

346
00:29:51,320 --> 00:30:00,405
تسمح لك طريقة إعادة الضبط بإعادة تعيين النموذج إلى حالته العادية،

347
00:30:00,405 --> 00:30:03,000
وإزالة كافة الإدخالات التي قمت بها في النموذج.

348
00:30:03,000 --> 00:30:05,480
لذلك، بمجرد إرسال المستخدم،

349
00:30:05,480 --> 00:30:09,030
يمكنك عادة التقاط القيم ثم إعادة تعيين النموذج

350
00:30:09,030 --> 00:30:14,365
بحيث يمكن إجراء المزيد من المدخلات كنموذج منفصل.

351
00:30:14,365 --> 00:30:17,450
لذلك هذه هي طريقة إعادة الضبط التي سنستخدمها هنا.

352
00:30:17,450 --> 00:30:19,265
لذلك مع هذه التغييرات،

353
00:30:19,265 --> 00:30:23,900
دعونا حفظ التغييرات ومن ثم نذهب ونرى نموذجنا في العمل.

354
00:30:23,900 --> 00:30:30,080
الشيء الصغير الأخير الذي أريد إضافته إلى القالب الخاص بي هو إظهار

355
00:30:30,080 --> 00:30:36,200
قيم النموذج داخل النموذج نفسه،

356
00:30:36,200 --> 00:30:38,230
على الرغم من

357
00:30:38,230 --> 00:30:42,580
أنك في تطبيق حقيقي، لن تقوم بذلك لكنني أردت فقط أن أوضح

358
00:30:42,580 --> 00:30:47,165
لك كيف يمكنك رؤية قيم FeedBackForm مباشرة هنا،

359
00:30:47,165 --> 00:30:49,095
من نموذج FeedBackForm

360
00:30:49,095 --> 00:30:52,395
لذا، أنا يُمْكِنُ أَنْ أَعْملَ داخل هنا.

361
00:30:52,395 --> 00:31:02,625
أستطيع أن أقول Feedbackform.Value و الأنابيب من خلال جسون لإظهار هنا.

362
00:31:02,625 --> 00:31:08,435
وبالمثل، يمكنني القيام به هنا، FeedBackForm.

363
00:31:08,435 --> 00:31:15,840
هناك خاصية أخرى مرتبطة بنموذج النموذج الذي يسمى الحالة،

364
00:31:15,840 --> 00:31:20,440
والذي يوضح لي حالة النموذج في هذه اللحظة،

365
00:31:20,440 --> 00:31:22,265
سواء كان صالحًا أو غير صالح.

366
00:31:22,265 --> 00:31:26,900
لذلك، سأقوم بإضافة هذين إلى النموذج الخاص بي هنا،

367
00:31:26,900 --> 00:31:30,285
بحيث يتم عرض هذا في القالب الخاص بي.

368
00:31:30,285 --> 00:31:34,670
هذا فقط لإعطائك عرض فوري لما

369
00:31:34,670 --> 00:31:41,620
يحتوي عليه نموذج النموذج في ملف البرنامج النصي الخاص بي.

370
00:31:42,460 --> 00:31:47,590
دعونا حفظ التغييرات ونذهب ونلقي نظرة سريعة على شكلنا.

371
00:31:47,590 --> 00:31:50,325
بالعودة إلى متصفحنا،

372
00:31:50,325 --> 00:31:55,630
يمكنك الآن أن ترى أن قيم النموذج يتم عرضها

373
00:31:55,630 --> 00:32:04,460
هنا وأن النموذج في شكل جيد لتمكيننا من كتابة القيم.

374
00:32:04,460 --> 00:32:08,660
لذا دعونا نكتب بعض القيم العشوائية هنا ويمكنك أن

375
00:32:08,660 --> 00:32:14,090
ترى على الفور أن القيمة تنعكس في نموذج FeedBackForm هناك،

376
00:32:14,090 --> 00:32:24,020
مباشرة في الأعلى والبريد الإلكتروني.

377
00:32:26,050 --> 00:32:29,295
لا يهم، فقط اكتب شيئا.

378
00:32:29,295 --> 00:32:31,680
ثم، هذا التبديل التبديل،

379
00:32:31,680 --> 00:32:34,575
يمكنك أن ترى أنه عند تشغيله وإيقاف تشغيله،

380
00:32:34,575 --> 00:32:39,385
وتوافق بدوره يتغير من كاذبة إلى ترو.

381
00:32:39,385 --> 00:32:43,030
لذلك اسمحوا لي أن أترك الأمر في صحيح ثم حدد.

382
00:32:43,030 --> 00:32:50,640
اسمحوا لي أن حدد البريد الإلكتروني ثم ترى أن نوع جهة الاتصال هنا قد تغير إلى البريد الإلكتروني.

383
00:32:50,640 --> 00:32:56,060
لذا، هذه هي الطريقة التي ستحدد بها لتغيير القيمة.

384
00:32:56,060 --> 00:33:00,575
لذا، دعنا نقول البريد الإلكتروني ثم هنا،

385
00:33:00,575 --> 00:33:01,940
يمكننا كتابة الرسالة.

386
00:33:01,940 --> 00:33:05,960
بعض النص العشوائي هنا

387
00:33:05,960 --> 00:33:10,675
وستتمكن من رؤية أن النص العشوائي ينعكس في الرسالة هناك.

388
00:33:10,675 --> 00:33:12,690
دعونا نرسل النموذج.

389
00:33:12,690 --> 00:33:16,680
لذلك، عند النقر على إرسال ترى على الفور في وحدة التحكم،

390
00:33:16,680 --> 00:33:20,605
القيمة التي يتم طباعتها هنا،

391
00:33:20,605 --> 00:33:21,870
في هذا الكائن هنا.

392
00:33:21,870 --> 00:33:27,155
لذلك يمكنك استعراض لرؤية جميع خصائص هذا الكائن،

393
00:33:27,155 --> 00:33:31,050
نموذج نموذج ردود الفعل.

394
00:33:31,050 --> 00:33:38,210
لذلك، هذا هو مثال على شكل رد الفعل داخل طلبنا.

395
00:33:38,210 --> 00:33:41,850
و هذا يكمل هذا التمرين.

396
00:33:41,850 --> 00:33:44,800
في هذا التمرين، رأينا كيف يمكننا إنشاء

397
00:33:44,800 --> 00:33:47,910
نموذج تفاعلي داخل تطبيقنا الزاوي.

398
00:33:47,910 --> 00:33:52,910
هذه أيضًا نقطة جيدة يمكنك فيها إجراء التزام Git بالرسالة،

399
00:33:52,910 --> 00:33:55,670
وتشكل الجزء الأول من التفاعل.