1
00:00:00,000 --> 00:00:04,979
[MUSIC]

2
00:00:04,979 --> 00:00:09,281
اسمحوا لنا أن نعرف بإيجاز أشكال ونماذج الدعم في Angular.

3
00:00:09,281 --> 00:00:14,748
لقد رأينا بالفعل استخدام النماذج في دورة bootstrap السابقة

4
00:00:14,748 --> 00:00:20,139
ورأينا كيف يتيح لنا Bootstrap تصميم أشكال HDMI القياسية.

5
00:00:20,139 --> 00:00:24,664
في هذا الدرس، سوف ننظر إلى الدعم الزاوي للأشكال،

6
00:00:24,664 --> 00:00:30,200
نوعين مختلفين من الأشكال، الأشكال التي تحركها القوالب والأشكال التفاعلية.

7
00:00:30,200 --> 00:00:32,450
سنلقي نظرة على الفرق بين الاثنين،

8
00:00:32,450 --> 00:00:35,670
وحيث يكون كل واحد منهم مناسبًا داخل تطبيقنا الزاوي.

9
00:00:35,670 --> 00:00:39,400
سننظر في مزايا وعيوب كل نهج

10
00:00:39,400 --> 00:00:43,490
بمزيد من التفصيل في هذا الدرس والدرس التالي.

11
00:00:44,910 --> 00:00:50,880
أيضًا، سننظر في التحقق من صحة النموذج، وكيف يدعم Angular التحقق من صحة النموذج،

12
00:00:50,880 --> 00:00:55,600
وكيف يمكننا إجراء التحقق من صحة النموذج الخاص بنموذج يستند

13
00:00:55,600 --> 00:01:00,420
إلى القالب في المحاضرة التالية، بعد التمرين.

14
00:01:02,400 --> 00:01:06,867
لقد أدركنا بالفعل أن النماذج تدعم

15
00:01:06,867 --> 00:01:10,230
تجربة إدخال بيانات متماسكة وفعالة ومقنعة للمستخدمين.

16
00:01:10,230 --> 00:01:14,350
ترى النماذج المستخدمة في كل مكان على مواقع الويب.

17
00:01:14,350 --> 00:01:14,940
على سبيل المثال،

18
00:01:14,940 --> 00:01:19,520
عندما تحتاج إلى تسجيل الدخول إلى موقع ويب، يجب عليك كتابة معرف المستخدم وكلمة المرور الخاصة بك.

19
00:01:19,520 --> 00:01:22,210
أو عندما تحتاج إلى تقديم معلومات على سبيل المثال.

20
00:01:22,210 --> 00:01:26,871
إذا كنت تحجز تذكرة فيلم، أو إذا كنت تضع

21
00:01:26,871 --> 00:01:32,027
طلبًا في متجر بقالة على الإنترنت، أو العديد من حالات الاستخدام الأخرى،

22
00:01:32,027 --> 00:01:37,482
يتم استخدام النماذج على نطاق واسع لتوفير طريقة شاملة

23
00:01:37,482 --> 00:01:43,360
للمستخدمين لإدخال المعلومات في مواقع الويب أو تطبيق الويب.

24
00:01:43,360 --> 00:01:47,922
يوفر إطار العمل الزاوي دعمًا شاملاً

25
00:01:47,922 --> 00:01:51,670
للنماذج، بما في ذلك التحقق من صحة النماذج والنماذج.

26
00:01:51,670 --> 00:01:57,379
هذا هو المكان الذي نستفيد فيه من دعم Angular لربط البيانات في اتجاهين

27
00:01:57,379 --> 00:02:03,690
وتتبع التغييرات التي نجريها في عناصر النموذج، وكذلك التحقق من صحة النموذج.

28
00:02:03,690 --> 00:02:07,030
لذلك عند إدخال البيانات في حقول الإدخال في النموذج الخاص بك،

29
00:02:07,030 --> 00:02:11,330
يتم تقييم البيانات تلقائيًا مع دعم Angular للنماذج.

30
00:02:11,330 --> 00:02:15,980
سنلقي نظرة على بعض هذه بمزيد من التفصيل بينما نذهب من خلال الدروس.

31
00:02:15,980 --> 00:02:21,010
اسمحوا لي أن أذكركم بسرعة من أشكال HTML أنفسهم.

32
00:02:21,010 --> 00:02:24,790
أنت تعرف بالفعل أن النماذج معتمدة من خلال

33
00:02:25,910 --> 00:02:28,200
عنصر النموذج في صفحة HTML الخاصة بك.

34
00:02:28,200 --> 00:02:32,734
جنبا إلى جنب مع عنصر النموذج، داخل علامة النموذج، يمكنك أيضا تضمين أشياء

35
00:02:32,734 --> 00:02:37,561
مثل <input>، <textarea>، <select>، و <button>s، وغيرها الكثير.

36
00:02:37,561 --> 00:02:42,585
سنرى كيف يؤدي الدعم الزاوي مع

37
00:02:42,585 --> 00:02:47,608
عناصر نموذج HTML، مما يمكننا من تصميم نوعين مختلفين من الأشكال، والأشكال التي

38
00:02:47,608 --> 00:02:52,292
تعتمد على القالب، وكذلك الأشكال التفاعلية في Angular.

39
00:02:52,292 --> 00:02:58,585
في هذا الدرس، سوف نركز على الدعم الزاوي للأشكال التي تحركها القوالب.

40
00:02:58,585 --> 00:03:03,125
في نموذج يستند إلى القالب، سيستخدمون القالب Angular مع

41
00:03:03,125 --> 00:03:07,250
عناصر النموذج التي رأيناها للتو لتكون قادرة على بناء النماذج

42
00:03:07,250 --> 00:03:10,646
والاستفادة من الدعم الزاوي للنماذج التي تعتمد على القالب.

43
00:03:10,646 --> 00:03:15,432
وسوف نكون قادرين على ربط التوجيهات الخاصة بالنموذج الزاوي

44
00:03:15,432 --> 00:03:20,450
بعناصر النموذج داخل القوالب الخاصة بنا، ومن ثم الاستفادة من ربط البيانات ثنائي الاتجاه

45
00:03:20,450 --> 00:03:25,336
التي تشكل أيضًا دعم التحقق والخطأ الذي يوفره Angular لنا.

46
00:03:25,336 --> 00:03:28,128
في التمرين التالي على الفور،

47
00:03:28,128 --> 00:03:32,512
ستنظر هذه المحاضرة في كيفية تصميم نموذج يحركه القالب. على

48
00:03:32,512 --> 00:03:37,164
وجه الخصوص، سننظر أيضًا في كيفية استخدام ربط البيانات ثنائي الاتجاه مع

49
00:03:37,164 --> 00:03:41,986
دعم Angular، باستخدام توجيه ngModel

50
00:03:41,986 --> 00:03:44,894
لربط المعلومات من النموذج الخاص بك

51
00:03:44,894 --> 00:03:50,430
ببعض متغيرات JavaScript التي أعلنتها داخل فصولك الدراسية.

52
00:03:50,430 --> 00:03:53,610
في التمرين الذي يتبع هذه المحاضرة مباشرة،

53
00:03:53,610 --> 00:03:56,960
ننظر في كيفية تصميم نموذج يحركه القالب. على

54
00:03:56,960 --> 00:04:01,350
وجه الخصوص، سننظر في كيفية

55
00:04:01,350 --> 00:04:06,280
الاستفادة من ربط البيانات ثنائي الاتجاه الذي يدعمه Angular باستخدام توجيه ngModel لربط المعلومات من

56
00:04:06,280 --> 00:04:10,870
النموذج الخاص بك إلى بعض متغيرات JavaScript التي تعلن عنها داخل فصولك الدراسية.

57
00:04:10,870 --> 00:04:14,860
وهذا هو المكان الذي

58
00:04:14,860 --> 00:04:19,140
يأتي الموز في مربع الذي أشرنا إليه في وقت سابق مع توجيه نغموديل لمساعدتنا.

59
00:04:19,140 --> 00:04:22,880
بينما نذهب من خلال التدريبات، هذا سوف يصبح أكثر وضوحا.

60
00:04:22,880 --> 00:04:27,139
الآن دعونا نتعلم كيفية الاستفادة من الدعم الزاوي

61
00:04:27,139 --> 00:04:32,585
لأشكال مدفوعة القالب من أجل تصميم أشكالنا في التدريبات.

62
00:04:32,585 --> 00:04:36,014
[ موسيقى]