1
00:00:03,890 --> 00:00:09,395
لقد تعلمنا للتو عن الدعم الزاوي للنماذج،

2
00:00:09,395 --> 00:00:12,125
وعلى وجه الخصوص، النموذج الذي يحركه القالب.

3
00:00:12,125 --> 00:00:17,520
في هذا التمرين، سنقوم بإنشاء نموذج يستند إلى القالب ومن ثم تضمين ذلك

4
00:00:17,520 --> 00:00:23,375
في حوار مكون تسجيل الدخول الذي أنشأنا في التمرين السابق.

5
00:00:23,375 --> 00:00:29,580
في هذه المحاضرة،

6
00:00:29,580 --> 00:00:34,850
يتيح النموذج القائم على القالب الذي نقوم بإنشائه للمستخدم كتابة اسم المستخدم وكلمة المرور الخاصة به في نموذج تسجيل الدخول،

7
00:00:34,850 --> 00:00:37,700
ثم إرسال هذه المعلومات إلى طلبنا.

8
00:00:37,700 --> 00:00:41,825
الآن، كيف تتم معالجة هذه المعلومات من قبل جانب الخادم،

9
00:00:41,825 --> 00:00:44,990
يتم تركها إلى دورة لاحقة.

10
00:00:44,990 --> 00:00:49,310
ولكن في الوقت الحالي، لدينا طريقة لالتقاط اسم المستخدم وكلمة المرور

11
00:00:49,310 --> 00:00:54,285
المقدمة من قبل المستخدم من خلال نموذج يستند إلى قالب تسجيل الدخول،

12
00:00:54,285 --> 00:00:58,210
والتي سنقوم بتصميمها في هذا التمرين.

13
00:00:58,210 --> 00:01:01,115
الشروع في التمرين،

14
00:01:01,115 --> 00:01:05,030
فإن الخطوة الأولى لتكون قادرة على الاستفادة

15
00:01:05,030 --> 00:01:08,890
من استخدام النماذج التي يحركها القالب هي الذهاب إلى

16
00:01:08,890 --> 00:01:17,140
ملف module.ts التطبيق ومن ثم استيراد بعض الوحدات الداعمة لتطبيقنا.

17
00:01:17,140 --> 00:01:20,764
لذا، فإن أول شيء سأقوم باستيراده هو

18
00:01:20,764 --> 00:01:33,155
MatformFieldModule من

19
00:01:33,155 --> 00:01:38,085
حقل نموذج المادة الزاوي.

20
00:01:38,085 --> 00:01:44,600
لذلك، وهذا يمكننا من تجميع معا مجموعة من العناصر في حقل نموذج هناك.

21
00:01:44,600 --> 00:01:52,190
ثم، سنقوم أيضا استيراد ماتينبوتمودول.

22
00:01:52,190 --> 00:01:58,100
تدعم وحدة الإدخال مكون الإدخال وهو

23
00:01:58,100 --> 00:02:03,650
مكون مادة الزاوي منمق

24
00:02:03,650 --> 00:02:09,690
يدعم حقل نموذج الإدخال من نماذج HTML هنا.

25
00:02:09,690 --> 00:02:15,520
ثم، أيضا، اسمحوا لي استيراد MatcheckBox،

26
00:02:18,680 --> 00:02:29,895
وحدة المقابلة من مربع الاختيار مادة الزاوي.

27
00:02:29,895 --> 00:02:32,690
لذلك، هذه الثلاثة تدعم

28
00:02:32,690 --> 00:02:36,410
ثلاثة عناصر النموذج التي سنستخدمها عندما ننشئ تطبيقنا.

29
00:02:36,410 --> 00:02:42,420
تمكننا وحدة حقل النموذج من تجميع مجموعة من عناصر النموذج هناك.

30
00:02:42,420 --> 00:02:46,240
وحدة الإدخال تمكننا من إنشاء حقل الإدخال هناك.

31
00:02:46,240 --> 00:02:48,460
وحدة مربع الاختيار، كما تتوقع،

32
00:02:48,460 --> 00:02:50,570
تمكننا من إنشاء مربع اختيار.

33
00:02:50,570 --> 00:02:53,670
بالإضافة إلى ذلك، أحتاج أيضًا إلى استيراد

34
00:02:53,670 --> 00:03:06,190
FormsModule من أشكال Angular.

35
00:03:06,190 --> 00:03:10,130
FormsModule هو الذي يدعم النماذج في Angular.

36
00:03:10,130 --> 00:03:12,445
هذا هو الذي يدعم النماذج التي يحركها القالب.

37
00:03:12,445 --> 00:03:15,280
لذلك، الآن بعد أن قمنا باستيراد هذه، من الواضح أن

38
00:03:15,280 --> 00:03:23,775
الخطوة التالية هي الذهاب إلى الديكور نغمودول ومن ثم سحب هذه في مكانها هنا.

39
00:03:23,775 --> 00:03:30,560
لذلك، سنذهب هنا ثم إدخال FormsModule.

40
00:03:30,660 --> 00:03:38,200
اسمحوا لي إدخال فورمفيلدمودول،

41
00:03:38,200 --> 00:03:45,075
إنبوتمودول، تشيكبوكسمودول في هنا.

42
00:03:45,075 --> 00:03:49,325
ثم، الآن وحدة التطبيق الخاصة بي جاهزة

43
00:03:49,325 --> 00:03:55,125
لدعم استخدام النماذج التي تعتمد على القالب في تطبيقنا.

44
00:03:55,125 --> 00:03:57,485
الآن بعد أن أكملنا هذا،

45
00:03:57,485 --> 00:03:59,530
دعونا نذهب إلى مكون تسجيل الدخول.

46
00:03:59,530 --> 00:04:02,320
الكثير من عملنا هو في عنصر تسجيل الدخول.

47
00:04:02,320 --> 00:04:04,090
اسمحوا لي أولا تصميم النموذج.

48
00:04:04,090 --> 00:04:07,975
لذلك، الذهاب إلى ملف قالب مكون تسجيل الدخول،

49
00:04:07,975 --> 00:04:14,345
اسمحوا لي أن أضيف في القالب لنموذج لدينا لإنشاء النموذج هنا.

50
00:04:14,345 --> 00:04:16,190
لذلك، في الجزء العلوي،

51
00:04:16,190 --> 00:04:25,940
سأقوم بإنشاء p

52
00:04:25,940 --> 00:04:30,715
الذي سيعرض المعلومات التي كتبتها في النموذج.

53
00:04:30,715 --> 00:04:36,750
في التعليمات البرمجية، سيكون لدينا متغير جافا سكريبت يسمى المستخدم،

54
00:04:36,750 --> 00:04:41,175
والتي سيتم ربطها في الحقول في هذا النموذج.

55
00:04:41,175 --> 00:04:42,500
الآن، عندما نخلق ذلك،

56
00:04:42,500 --> 00:04:43,690
ثم سوف تصبح أكثر وضوحا.

57
00:04:43,690 --> 00:04:45,490
الآن، هنا، من خلال تضمين هذا،

58
00:04:45,490 --> 00:04:50,100
ما أقوم بتمكينه هو إظهار التغييرات.

59
00:04:50,100 --> 00:04:52,990
كما نكتب في المعلومات في النموذج،

60
00:04:52,990 --> 00:04:56,390
التغييرات المقابلة التي تحدث في التعليمات البرمجية

61
00:04:56,390 --> 00:05:00,880
لتعكس حالة النموذج يمكن أن تظهر هناك حق.

62
00:05:00,880 --> 00:05:04,500
الآن، بالإضافة إلى ذلك، الآن سأقوم بإنشاء النموذج هنا.

63
00:05:04,500 --> 00:05:07,210
لذلك، سوف ندخل ثم نضيف عنصر النموذج هنا.

64
00:05:07,210 --> 00:05:09,470
إلى عنصر النموذج هذا،

65
00:05:09,470 --> 00:05:11,000
سأقوم بتطبيق

66
00:05:11,000 --> 00:05:15,260
سمة novalidate هنا لأننا

67
00:05:15,260 --> 00:05:19,625
نريد التحقق من صحة النموذج من قبل Angular وليس من خلال

68
00:05:19,625 --> 00:05:28,820
التحقق من صحة نموذج HTML القياسي

69
00:05:28,820 --> 00:05:30,230
الذي يدعمه المتصفح.

70
00:05:30,230 --> 00:05:38,810
لذلك، سنقوم بتحويل تلك المسؤولية إلى تطبيقنا الزاوي نفسه.

71
00:05:38,810 --> 00:05:44,800
لذلك، لهذا السبب أحدد سمة novalidate لهاتفي.

72
00:05:44,800 --> 00:05:47,310
لذلك، هذا يخلق النموذج الخاص بي هنا. في

73
00:05:47,310 --> 00:05:53,720
الداخل هنا، سأستخدم محتوى حوار الحصيرة.

74
00:05:53,790 --> 00:05:58,360
الآن، محتوى حوار الحصيرة، كما تتوقع،

75
00:05:58,360 --> 00:06:03,740
هو منطقة تحتوي على محتوى الحوار نفسه.

76
00:06:03,740 --> 00:06:06,970
لذلك، هذا هو السبب في وضعنا هذا المحتوى الحصيرة الحوار في هنا.

77
00:06:06,970 --> 00:06:14,265
ثم، هنا، أنا ذاهب إلى إنشاء النموذج الخاص بي هنا.

78
00:06:14,265 --> 00:06:16,675
لذا، وَضعتُ a p هناك.

79
00:06:16,675 --> 00:06:23,915
داخل هذا p، سأستخدم حقل شكل الحصير هنا.

80
00:06:23,915 --> 00:06:28,805
لذا، فإن حقل شكل الحصيرة يمكّنني من تجميع مجموعة

81
00:06:28,805 --> 00:06:33,845
من العناصر ذات الصلة بالنموذج التي أستخدمها معًا.

82
00:06:33,845 --> 00:06:39,765
لذلك، هنا، سأضع المدخلات هنا.

83
00:06:39,765 --> 00:06:44,505
لذلك، حقل نموذج الإدخال من أشكال ملف HTML.

84
00:06:44,505 --> 00:06:50,255
ثم، لهذا، سأقوم بتطبيق سمة MatInput

85
00:06:50,255 --> 00:06:57,360
التي ستمكننا من تطبيق تصميم المواد لهذا الإدخال.

86
00:06:57,360 --> 00:07:04,635
بعد ذلك، سنقدم عنصرًا نائبًا لهذا كاسم مستخدم،

87
00:07:04,635 --> 00:07:06,569
وكما تتوقع،

88
00:07:06,569 --> 00:07:12,220
وسيكون النوع نوع النص هنا.

89
00:07:15,140 --> 00:07:19,830
اسمحوا لي أن أضيف في نغموديل.

90
00:07:19,830 --> 00:07:30,000
لذلك، يتم دعم نموذج يستند إلى القالب من خلال السمة ngModel هنا.

91
00:07:30,000 --> 00:07:31,520
لذلك، مع نغموديل.

92
00:07:31,520 --> 00:07:36,130
لذلك، يمكنك أن ترى طريقة البريد الوارد الموز لإعلان هذا.

93
00:07:36,130 --> 00:07:40,270
بعد ذلك، سنقول user.user.user

94
00:07:40,270 --> 00:07:48,345
لذا، سيكون هذا المستخدم كائنًا جافا سكريبت في ملف TypeScript الخاص بي،

95
00:07:48,345 --> 00:07:52,440
والذي سيحتوي على خاصية اسم المستخدم هناك،

96
00:07:52,440 --> 00:07:58,540
والتي ستتبع القيمة التي تقوم بإدخالها في حقل الإدخال هذا في النموذج الخاص بي هناك.

97
00:07:58,540 --> 00:08:06,320
لذلك، هذا هو السبب في أننا ربط معلومات حقل الإدخال هذه في كائن جافا سكريبت هذا.

98
00:08:06,320 --> 00:08:08,890
لذا، هذا هو ربط البيانات ثنائي الاتجاه الذي نقوم به

99
00:08:08,890 --> 00:08:13,250
بين عنصر النموذج ورمز جافا سكريبت المقابل.

100
00:08:13,250 --> 00:08:19,640
بعد ذلك، سنعطي هذا الاسم كاسم مستخدم هنا.

101
00:08:19,640 --> 00:08:24,495
لذا، هذه هي حقول النموذج الأولى التي أضفتها هنا.

102
00:08:24,495 --> 00:08:29,330
الآن، وبالمثل، سأضيف في حقل النموذج الثاني لكلمة المرور.

103
00:08:29,330 --> 00:08:36,255
لذلك، لذلك، اسمحوا لي فقط نسخ هذا ومن ثم لصقه هنا.

104
00:08:36,255 --> 00:08:41,820
لذا، سيكون الحقل الثاني هو الإدخال، MatInput،

105
00:08:41,820 --> 00:08:47,760
العنصر النائب هو كلمة المرور،

106
00:08:47,760 --> 00:08:52,360
ثم النوع هو كلمة المرور.

107
00:08:52,360 --> 00:09:01,385
لذلك، عنصر إدخال كلمة المرور من دعم نموذج HTML5.

108
00:09:01,385 --> 00:09:11,050
سيتم ربط ngModel نفسه بكلمة مرور المستخدم وسيكون الاسم كلمة المرور.

109
00:09:11,050 --> 00:09:16,335
لذلك، ترى أن كائن جافا سكريبت المستخدم يحتوي الآن على اثنين من الخصائص،

110
00:09:16,335 --> 00:09:20,700
اسم المستخدم وكلمة المرور، والتي سوف تتبع بيانات اعتماد المستخدم هنا.

111
00:09:20,700 --> 00:09:24,995
لذلك، هذين الحقلين نموذج داخل هذا p هنا،

112
00:09:24,995 --> 00:09:27,740
وبعد ذلك أيضا سوف نضيف في واحد

113
00:09:27,740 --> 00:09:35,795
آخر يسمى مربع الاختيار حصيرة.

114
00:09:35,795 --> 00:09:41,050
رأيت أننا قد أدرجنا وحدة مربع الاختيار في وقت سابق.

115
00:09:41,050 --> 00:09:43,290
لذلك، نحن ذاهبون لإضافة في هذا.

116
00:09:43,290 --> 00:09:48,735
الآن، مربع الاختيار هذا الذي عند وضع علامة عليه سيعلم

117
00:09:48,735 --> 00:09:55,990
تطبيق Angular الخاص بي أنه يجب حفظ اسم المستخدم وكلمة المرور في التطبيق.

118
00:09:55,990 --> 00:10:01,220
لذلك، اسمحوا لي أن ربط هذا مع نموذج نغ إلى

119
00:10:01,220 --> 00:10:09,730
خاصية المقابلة تسمى تذكر في كائن المستخدم.

120
00:10:09,730 --> 00:10:11,060
لذا، سيكون هذا،

121
00:10:11,060 --> 00:10:14,020
ستكون هذه الخاصية إما صحيحة أو خاطئة اعتمادًا

122
00:10:14,020 --> 00:10:17,315
على ما إذا كان مربع الاختيار محدد أو غير محدد.

123
00:10:17,315 --> 00:10:19,830
إذاً، هذه هي الطريقة التي نتعقبها

124
00:10:19,830 --> 00:10:24,795
لذلك، نقوم بربط البيانات ثنائي الاتجاه بين مربع الاختيار هذا وهذه

125
00:10:24,795 --> 00:10:32,330
الخاصية تسمى تذكر كائن جافا سكريبت المستخدم في شفرتي هناك.

126
00:10:32,330 --> 00:10:36,260
ثم الاسم سوف نتذكر،

127
00:10:36,260 --> 00:10:43,590
وبعد ذلك سوف نعطي هذه التسمية كما تذكرني.

128
00:10:43,850 --> 00:10:46,620
لذلك، عندما يتحقق المستخدم من هذا،

129
00:10:46,620 --> 00:10:50,200
ثم سيتم تذكر معلومات المستخدم هنا.

130
00:10:50,200 --> 00:10:52,410
لذلك، هذا هو مربع الاختيار الحصير الذي أضفناه.

131
00:10:52,410 --> 00:10:54,270
لذلك، لدينا ثلاثة حقول هنا،

132
00:10:54,270 --> 00:10:56,585
اسم المستخدم، كلمة المرور،

133
00:10:56,585 --> 00:11:02,880
ثم مربع الاختيار هنا في النموذج الخاص بي هنا.

134
00:11:02,880 --> 00:11:06,090
لذلك، هذا هو محتوى الحوار الحصير هنا.

135
00:11:06,090 --> 00:11:08,800
الآن، بالإضافة إلى محتوى الحوار الحصير،

136
00:11:08,800 --> 00:11:14,985
يمكنني أيضا إضافة إجراءات الحوار الحصير هنا.

137
00:11:14,985 --> 00:11:23,820
الآن، يمكن أن تحتوي إجراءات الحوار على الأزرار التي تتوافق مع مربع الحوار هذا.

138
00:11:23,820 --> 00:11:28,145
لذلك، هذا هو ما سيكون بمثابة أزرار العمل في الحوار،

139
00:11:28,145 --> 00:11:32,210
وأيضا لأنها محاطة داخل النموذج،

140
00:11:32,210 --> 00:11:36,485
وهذه الأزرار أيضا بمثابة أزرار تقديم النموذج بالنسبة لي.

141
00:11:36,485 --> 00:11:44,530
لذلك، هنا، اسمحوا لي أن أفعل فاصل مرنة فئة تمتد،

142
00:11:46,580 --> 00:11:52,670
ومن ثم اسمحوا لي أن أضيف في زر،

143
00:11:55,950 --> 00:12:02,140
حصيرة زر، ومن ثم هذا الزر،

144
00:12:02,140 --> 00:12:07,090
وسوف تتحول أيضا إلى زر إغلاق الحصيرة الحوار.

145
00:12:07,090 --> 00:12:12,115
لذلك، سيكون هذا زر إلغاء سأضمنه في النموذج الخاص بي هنا،

146
00:12:12,115 --> 00:12:14,925
ثم يتم النقر على هذا سيتم رفض الحوار،

147
00:12:14,925 --> 00:12:17,960
وبشكل أساسي مما يعني أنك لا تقدم النموذج هناك.

148
00:12:17,960 --> 00:12:20,505
لذلك، وهذا يعمل أيضا كزر إلغاء للنموذج،

149
00:12:20,505 --> 00:12:23,595
ومن ثم أيضا رفض الحوار في نفس الوقت.

150
00:12:23,595 --> 00:12:27,180
لذلك، باستخدام هذه السمة إلى هذا الزر،

151
00:12:27,180 --> 00:12:31,595
ونحن نعلن هذا على أنه الزر الذي يرفض الخطأ،

152
00:12:31,595 --> 00:12:36,940
بنفس الطريقة التي لدينا هذا الزر في شريط الأدوات.

153
00:12:36,940 --> 00:12:38,990
لذلك، إغلاق الحوار الحصيرة هناك.

154
00:12:38,990 --> 00:12:42,470
ثم الزر الآخر الذي سيكون لدينا هو

155
00:12:42,470 --> 00:12:49,490
للإرسال بحيث

156
00:12:49,490 --> 00:12:55,030
يكون نوع الزر هذا هو زر الإرسال داخل نموذج هناك.

157
00:12:55,030 --> 00:12:56,315
لذلك، عندما يتم النقر على هذا،

158
00:12:56,315 --> 00:13:01,495
أن يؤدي إلى تقديم النموذج لهذا النموذج هنا،

159
00:13:01,495 --> 00:13:06,420
ومن ثم اسمحوا لي أن أضيف في فئة لهذا،

160
00:13:06,420 --> 00:13:13,795
وسوف نقول الخلفية الأساسية، والنص الأزهار.

161
00:13:13,795 --> 00:13:19,345
هذه الفئات لقد أضفت بالفعل إلى ملف Styles.acss الخاص بي هناك.

162
00:13:19,345 --> 00:13:24,800
لذلك، نص الأزهار البيضاء،

163
00:13:24,800 --> 00:13:31,620
وسيتم تسمية هذا الزر على أنه زر تسجيل الدخول هناك.

164
00:13:31,620 --> 00:13:36,090
لذلك، سيكون هذا زر أزرق اللون الذي سيتم عرضه في الشاشة هناك.

165
00:13:36,090 --> 00:13:43,275
لذلك، مع هذا، يتم إنشاء هيكل النموذج الخاص بي في القالب هناك.

166
00:13:43,275 --> 00:13:49,355
الآن، الخطوة التالية هي الانتقال إلى الشفرة ثم التعامل مع إرسال النموذج نفسه.

167
00:13:49,355 --> 00:13:54,070
لذلك، الآن الذهاب إلى ملف component.ts تسجيل الدخول،

168
00:13:54,070 --> 00:13:57,400
نحن بحاجة إلى التعامل مع تقديم النموذج هنا.

169
00:13:57,400 --> 00:14:02,070
الآن، الخطوة الأولى التي سأقوم بها هي عندما يتم إنشاء مكون تسجيل الدخول هذا،

170
00:14:02,070 --> 00:14:12,110
سنقوم بإنشاء كائن مستخدم هنا مع اسم المستخدم الخاص بالخصائص،

171
00:14:12,110 --> 00:14:16,550
والذي سيكون سلسلة فارغة للبدء بها،

172
00:14:16,610 --> 00:14:22,570
كلمة المرور التي ستكون أيضًا سلسلة فارغة لتبدأ

173
00:14:22,570 --> 00:14:27,050
بها، ثم تذكر ما هو خطأ.

174
00:14:27,050 --> 00:14:29,640
الآن، من خلال إعلان هذا هنا،

175
00:14:29,640 --> 00:14:33,530
نحن نقول أيضا أنه يمكننا الآن ربط في

176
00:14:33,530 --> 00:14:40,210
هذه الخصائص الثلاثة إلى عناصر النموذج الثلاثة في القالب الخاص بي.

177
00:14:40,210 --> 00:14:43,920
لذلك، هذا ما انتهى بنا الأمر إلى تحقيقه هنا.

178
00:14:43,920 --> 00:14:46,440
بالنسبة للمنشئ، اسمحوا

179
00:14:46,440 --> 00:14:55,640
لي أن حقن المرجع الحوار هنا،

180
00:14:55,880 --> 00:15:05,410
حصيرة الحوار المرجع، وهذا الحكم الحوار حصيرة سوف تأخذ المكون المقابل.

181
00:15:05,410 --> 00:15:08,755
لذلك، هذا هو إشارة إلى هذا المكون تسجيل الدخول هنا.

182
00:15:08,755 --> 00:15:11,990
لذلك، هذا يخبرنا متى - عندما يتم تقديم هذا،

183
00:15:11,990 --> 00:15:14,060
وكيفية التعامل مع هذا.

184
00:15:14,060 --> 00:15:21,985
لذلك، هنا، اسمحوا لي أن أضيف في وظيفة على إرسال هنا،

185
00:15:21,985 --> 00:15:24,155
وداخل وظيفة على إرسال،

186
00:15:24,155 --> 00:15:27,935
وأنا ذاهب ببساطة لتسجيل الدخول،

187
00:15:27,935 --> 00:15:32,145
وتسجيل معلومات المستخدمين المقابلة،

188
00:15:32,145 --> 00:15:35,690
لذلك ثم ينقر المستخدم على نموذج تسجيل الدخول،

189
00:15:35,690 --> 00:15:39,430
نموذج تسجيل الدخول ويقدم نموذج تسجيل الدخول.

190
00:15:39,430 --> 00:15:44,585
أنا فقط ذاهب لتسجيل معلومات المستخدم إلى وحدة التحكم في الوقت الحالي.

191
00:15:44,585 --> 00:15:49,150
في وقت لاحق، سنقوم بتصميم في دورة من جانب الخادم.

192
00:15:49,150 --> 00:15:52,310
سوف نتعامل مع عملية تسجيل الدخول الفعلية عندما يكون

193
00:15:52,310 --> 00:15:57,280
خادمنا جاهزًا وقادرًا على التعامل مع تسجيل الدخول للمستخدم.

194
00:15:57,280 --> 00:16:03,710
لذا، بعد هذا، سنقول أن هذا الحوار قد انتهى

195
00:16:03,710 --> 00:16:06,255
الآن، لماذا نقوم بتضمين هذا هنا؟

196
00:16:06,255 --> 00:16:08,105
لذلك، عندما يتم تقديم النموذج،

197
00:16:08,105 --> 00:16:13,960
نريد أيضا أن نرفض المكون هناك،

198
00:16:13,960 --> 00:16:15,190
عنصر الحوار هناك.

199
00:16:15,190 --> 00:16:16,800
و بالتالي, فإننا إذ

200
00:16:16,800 --> 00:16:19,120
نطلق على هذا الحوار,

201
00:16:19,120 --> 00:16:23,620
فإننا نطلب من عنصر الحوار أن يغلق هنا.

202
00:16:23,620 --> 00:16:29,650
لذلك، هذا هو السبب في أنني أحصل على إشارة إلى مكون تسجيل الدخول هنا،

203
00:16:29,650 --> 00:16:33,655
والذي يعمل كمكون الحوار الخاص بي هنا.

204
00:16:33,655 --> 00:16:37,445
لذلك، سنكون قادرين على إغلاق مكون الحوار عن طريق القيام بذلك.

205
00:16:37,445 --> 00:16:39,350
لذلك، بمجرد قيام المستخدم بإرسال النموذج،

206
00:16:39,350 --> 00:16:41,440
ستقوم بتسجيل معلومات المستخدم،

207
00:16:41,440 --> 00:16:46,415
ثم قم بإغلاق مربع الحوار. هذا كل شيء

208
00:16:46,415 --> 00:16:51,640
دعونا حفظ التغييرات ثم انتقل ونلقي نظرة على التطبيق المحدث.

209
00:16:51,640 --> 00:16:54,590
انتقل إلى تطبيقنا في المتصفح،

210
00:16:54,590 --> 00:17:02,900
واسمحوا لي بفتح وحدة تحكم جافا سكريبت بحيث يمكنك رؤية المعلومات التي يتم تسجيل الدخول.

211
00:17:02,900 --> 00:17:09,890
اسمحوا لي أن فتح مربع حوار تسجيل الدخول هنا مع النموذج بالفعل في مكان،

212
00:17:09,890 --> 00:17:12,425
اسم المستخدم وكلمة المرور بالفعل في المكان.

213
00:17:12,425 --> 00:17:15,820
لذلك، اسمحوا لي أن اكتب اسم المستخدم.

214
00:17:15,820 --> 00:17:19,165
أنا أتصرف بالنرجسية هنا

215
00:17:19,165 --> 00:17:22,710
لذلك، أنا أكتب في اسم المستخدم وكلمة المرور هنا.

216
00:17:22,710 --> 00:17:26,495
الآن، لاحظ أنه عند كتابة المعلومات هنا،

217
00:17:26,495 --> 00:17:33,570
نظرًا لأنني أعرض قيمة كائن جافا سكريبت المستخدم هنا، فإن

218
00:17:33,570 --> 00:17:42,775
أي تغييرات أجريها تنعكس على الفور على الشاشة هنا.

219
00:17:42,775 --> 00:17:50,110
أيضا مربع الاختيار تذكر يجري وضع علامة على وخارج هنا.

220
00:17:50,110 --> 00:17:53,360
ثم عند إرسال النموذج هنا،

221
00:17:53,360 --> 00:17:56,040
يمكنك أن ترى أنه في وحدة التحكم،

222
00:17:56,040 --> 00:17:59,350
يتم تسجيل معلومات المستخدم إلى وحدة التحكم،

223
00:17:59,350 --> 00:18:00,595
واسم المستخدم، وكلمة المرور،

224
00:18:00,595 --> 00:18:03,440
ويتم تأمين قيمة تذكر إلى وحدة التحكم.

225
00:18:03,440 --> 00:18:06,170
لذلك، يمكنك الآن أن ترى أن نموذج تسجيل الدخول الخاص بي،

226
00:18:06,170 --> 00:18:09,275
النموذج المدفوع القالب يعمل بشكل صحيح.

227
00:18:09,275 --> 00:18:12,305
مع هذا، ونحن استكمال هذا التمرين،

228
00:18:12,305 --> 00:18:18,965
حيث رأينا كيف يمكننا تصميم نموذج مدفوعة قالب في التطبيق الزاوي لدينا.

229
00:18:18,965 --> 00:18:22,870
هذا هو الوقت المناسب بالنسبة لك للقيام Git Commit مع الرسالة،

230
00:18:22,870 --> 00:18:26,000
قالب مدفوعة النماذج الجزء 1.