1
00:00:04,070 --> 00:00:10,290
لقد أكملنا للتو التعلم عن النماذج التي تحركها القوالب الزاوي، وأيضا،

2
00:00:10,290 --> 00:00:14,300
في التمرين، شيدت أول نموذج يحركه القالب.

3
00:00:14,300 --> 00:00:18,210
الآن، عندما يقوم المستخدم بكتابة المعلومات في حقول النموذج،

4
00:00:18,210 --> 00:00:23,655
قد نرغب في التحقق من صحة البيانات التي يقوم المستخدم بكتابتها في حقول البيانات هذه.

5
00:00:23,655 --> 00:00:25,630
في الأيام الأولى من الويب،

6
00:00:25,630 --> 00:00:28,950
كانت الطريقة الوحيدة للتحقق من البيانات هي شحن البيانات

7
00:00:28,950 --> 00:00:32,580
إلى الخادم ثم إجراء الفحوصات على جانب الخادم،

8
00:00:32,580 --> 00:00:37,155
ومن ثم الحصول على النتيجة من جانب الخادم.

9
00:00:37,155 --> 00:00:41,935
ولكن في هذه الأيام، مع أطر عمل قوية

10
00:00:41,935 --> 00:00:46,580
من جانب العميل مثل Angular، يمكن إجراء الكثير من التحقق من صحة البيانات

11
00:00:46,580 --> 00:00:52,070
بسهولة على جانب العميل نفسه، ويمكننا بسهولة التقاط الكثير من الأخطاء على جانب العميل،

12
00:00:52,070 --> 00:00:56,885
ومن ثم توفير إشارة للمستخدم حول الأخطاء.

13
00:00:56,885 --> 00:01:00,170
الآن، هذا هو المكان الذي سنلقي فيه نظرة على دعم Angular

14
00:01:00,170 --> 00:01:03,725
للتحقق من صحة النموذج، ثم كيف يمكننا تنفيذ التحقق من صحة النموذج،

15
00:01:03,725 --> 00:01:11,170
ومن ثم عرض رسائل الخطأ للمستخدم في طرق العرض.

16
00:01:11,260 --> 00:01:17,455
يأتي HTML5 بالفعل مع بعض الدعم المدمج للتحقق من صحة النموذج.

17
00:01:17,455 --> 00:01:20,750
ولكن عندما نستخدم Angular لتطبيقنا،

18
00:01:20,750 --> 00:01:23,840
يجب علينا أولاً إيقاف التحقق من صحة نموذج HTML5،

19
00:01:23,840 --> 00:01:25,640
بحيث

20
00:01:25,640 --> 00:01:29,750
يتم نقل مسؤولية إجراء التحقق من صحة النموذج إلى تطبيق Angular.

21
00:01:29,750 --> 00:01:32,240
لذلك، للقيام بذلك للنموذج،

22
00:01:32,240 --> 00:01:34,525
كما رأينا في التمرين في وقت سابق،

23
00:01:34,525 --> 00:01:40,760
نقوم بتضمين سمة novalidate إلى علامة النموذج هناك،

24
00:01:40,760 --> 00:01:43,910
بحيث يضمن ذلك أن الزاوي

25
00:01:43,910 --> 00:01:47,585
يأخذ مسؤولية إجراء التحقق من صحة النموذج.

26
00:01:47,585 --> 00:01:50,645
كيف يساعدنا Angular على القيام بالتحقق من صحة النموذج؟

27
00:01:50,645 --> 00:01:55,324
و هذا ما سندرسه بمزيد من التفصيل بعد ذلك.

28
00:01:55,324 --> 00:01:59,600
عندما تحتاج إلى إجراء التحقق من صحة النموذج في Angular،

29
00:01:59,600 --> 00:02:05,570
خاصة عندما تحتاج إلى الرجوع إلى حقول النموذج داخل القالب الخاص بك،

30
00:02:05,570 --> 00:02:09,960
فأنت بحاجة إلى مساعدة المتغيرات المرجعية للقالب الزاوي.

31
00:02:09,960 --> 00:02:12,725
كيف نحدد متغير مرجع القالب؟

32
00:02:12,725 --> 00:02:15,485
يمكن تحديد متغير مرجع القالب

33
00:02:15,485 --> 00:02:19,235
لأي عنصر عن طريق ربط متغير قالب مثل هذا.

34
00:02:19,235 --> 00:02:22,880
على سبيل المثال، في هذه الحالة للنموذج،

35
00:02:22,880 --> 00:02:29,760
نحن نحدد نموذج تسجيل الدخول يساوي نغفورم.

36
00:02:29,760 --> 00:02:33,160
وبالمثل، بالنسبة لحقل الإدخال على سبيل المثال،

37
00:02:33,160 --> 00:02:35,050
يمكنك أن تقول شرطة مائلة،

38
00:02:35,050 --> 00:02:39,725
أو بالأحرى #username يساوي ngModel.

39
00:02:39,725 --> 00:02:46,130
في هذه الحالة، يكون نموذج تسجيل الدخول واسم المستخدم جميعًا متغيرات مرجع القالب.

40
00:02:46,130 --> 00:02:49,370
يمكن بعد ذلك استخدام هذه المتغيرات المرجعية للقالب داخل

41
00:02:49,370 --> 00:02:53,800
قالب Angular للإشارة إلى هذه الحقول.

42
00:02:53,800 --> 00:02:56,245
لذلك، في القالب نفسه،

43
00:02:56,245 --> 00:02:59,060
يمكنك التحقق من حالات التحكم

44
00:02:59,060 --> 00:03:03,289
لتلك الحقول بما في ذلك أشياء مثل ما إذا كان الحقل صالحًا،

45
00:03:03,289 --> 00:03:04,760
سواء كان قذرًا،

46
00:03:04,760 --> 00:03:06,430
أو أنه يحتوي على بعض الأخطاء.

47
00:03:06,430 --> 00:03:12,865
سوف نستفيد من هذا الدعم الذي تقدمه Angular من أجل القيام بالتحقق من صحة النموذج.

48
00:03:12,865 --> 00:03:15,964
كما ذكرت، سنقوم بالاستفادة من

49
00:03:15,964 --> 00:03:21,870
المتغيرات المرجعية للقالب لجمع حالة التحكم للتحقق من المعلومات.

50
00:03:21,870 --> 00:03:27,370
لذلك، على سبيل المثال، يمكنك أن تقول username.pristine داخل القالب الخاص بك.

51
00:03:27,370 --> 00:03:30,440
لذا، يشير ذلك إلى التحقق من الحالة،

52
00:03:30,440 --> 00:03:33,960
ما إذا كان عنصر التحكم الخاص في الحالة البكر،

53
00:03:33,960 --> 00:03:39,080
مما يعني أنه لم يتم لمسه وتعديله من قبل المستخدم حتى الآن.

54
00:03:39,080 --> 00:03:41,840
القذرة هي عكس البكر،

55
00:03:41,840 --> 00:03:45,050
مما يعني أنه عندما يكون الحقل قذرًا،

56
00:03:45,050 --> 00:03:49,105
فهذا يعني أن الحقل قد تم تعديله من قبل المستخدم في الماضي.

57
00:03:49,105 --> 00:03:53,090
وبالمثل،

58
00:03:53,090 --> 00:03:58,295
تمكننا حالة التحكم الصالحة وغير الصالحة من التحقق مما إذا كانت المعلومات الموجودة داخل هذا الحقل صالحة أم غير صالحة،

59
00:03:58,295 --> 00:04:02,360
اعتمادًا على مواصفات الشيك الخاص

60
00:04:02,360 --> 00:04:06,530
بصحة هذا الحقل أو الحالة غير الصالحة.

61
00:04:06,530 --> 00:04:11,990
لذلك، على سبيل المثال، يمكنك التحقق مما إذا كنت قد أعلنت حقل كما هو مطلوب،

62
00:04:11,990 --> 00:04:14,930
وهذا يعني أنك تتوقع

63
00:04:14,930 --> 00:04:18,790
من المستخدم كتابة بعض المعلومات على الأقل في الحقل.

64
00:04:18,790 --> 00:04:24,280
عدم وجود معلومات داخل الحقل في النموذج الخاص بك يعني أن الحقل غير صالح.

65
00:04:24,280 --> 00:04:28,670
وبالمثل، يمكنك تحديد البر الرئيسي أو الحد الأقصى لطول قيمة الحقل،

66
00:04:28,670 --> 00:04:31,970
بحيث يمكنك بسهولة التحقق مما إذا كان عدد الأحرف

67
00:04:31,970 --> 00:04:35,500
داخل الحقل حول الطول الرئيسي،

68
00:04:35,500 --> 00:04:37,660
أو أقل من الحد الأقصى للطول، وهلم جرا.

69
00:04:37,660 --> 00:04:39,380
في التمرين التالي،

70
00:04:39,380 --> 00:04:42,740
سنطبق هذه النهج المختلفة للتحقق من صحة النموذج

71
00:04:42,740 --> 00:04:47,080
لنموذج يستند إلى القالب الذي قمنا بتصميمه في التمرين السابق.

72
00:04:47,080 --> 00:04:51,564
على سبيل المثال، في النموذج الخاص بك،

73
00:04:51,564 --> 00:04:54,170
يمكنك تعطيل زر الإرسال عن طريق التحقق

74
00:04:54,170 --> 00:04:56,770
لمعرفة ما إذا كان هذا النموذج في حالة صالحة أم لا.

75
00:04:56,770 --> 00:05:00,650
لذلك في هذه الحالة، ستقوم بربط المعطل

76
00:05:00,650 --> 00:05:05,875
وتعيينه مساويًا لنموذج تسجيل الدخول.

77
00:05:05,875 --> 00:05:07,970
form.invald، يعني أنه عندما يكون النموذج غير صالح،

78
00:05:07,970 --> 00:05:10,480
سيتم تعطيل هذا الزر في هذه الحالة.

79
00:05:10,480 --> 00:05:15,910
لذلك، لن يسمح للمستخدم لتقديم المعلومات من خلال هذا النموذج معين.

80
00:05:15,910 --> 00:05:18,995
لذلك، هذه طريقة واحدة للتأكد من أن

81
00:05:18,995 --> 00:05:22,700
الإدخالات غير الصحيحة لن يتم تقديمها من قبل المستخدم من خلال النموذج.

82
00:05:22,700 --> 00:05:25,100
وبالمثل، بالنسبة لحقول محددة،

83
00:05:25,100 --> 00:05:30,080
يمكنك التحقق لمعرفة ما إذا كان قد تم ملء الحقل أم لا.

84
00:05:30,080 --> 00:05:33,125
لذلك، إذا قمت بتحديد أن حقل معين مطلوب

85
00:05:33,125 --> 00:05:36,620
عن طريق تحديد السمة المطلوبة لحقل الإدخال،

86
00:05:36,620 --> 00:05:39,320
ثم يمكنك التحقق لمعرفة ما إذا كان هناك خطأ من

87
00:05:39,320 --> 00:05:43,250
النوع المطلوب أثيرت لعنصر الحقل معين هناك.

88
00:05:43,250 --> 00:05:45,020
لذلك، في التعليمات البرمجية الخاصة بك على سبيل المثال،

89
00:05:45,020 --> 00:05:47,390
يمكنك حتى تحديد لإعلام المستخدم

90
00:05:47,390 --> 00:05:51,035
عن حقيقة أن حقل معين غير صحيح.

91
00:05:51,035 --> 00:05:56,885
يمكنك استخدام خطأ الحصيرة للدلالة على ذلك.

92
00:05:56,885 --> 00:06:01,230
لذا، فإن علامة خطأ الحصيرة، التي تأتي من

93
00:06:01,230 --> 00:06:06,555
، مرة أخرى، دعم نموذج المادة الزاوي كما ترون هنا،

94
00:06:06,555 --> 00:06:09,195
إذا تبين

95
00:06:09,195 --> 00:06:15,560
أن nGiF صحيحة، فسيتم عرض هذه الرسالة أدناه في حقل الإدخال هناك،

96
00:06:15,560 --> 00:06:17,100
وعلى غرار حقل الإدخال،

97
00:06:17,100 --> 00:06:20,405
سيتم وضع علامة حمراء في الشاشة.

98
00:06:20,405 --> 00:06:25,085
لذلك، هذا هو الشيء الذي كنت تسير على التحقق

99
00:06:25,085 --> 00:06:30,000
وضمان وأيضا تسليم رسائل الخطأ للمستخدم.

100
00:06:30,000 --> 00:06:31,740
في التمرين التالي،

101
00:06:31,740 --> 00:06:35,980
سنطبق هذا الأسلوب للتحقق من اسم المستخدم وكلمة المرور.

102
00:06:35,980 --> 00:06:40,700
سنحدد أن هذه الحقول مطلوبة وإذا

103
00:06:40,700 --> 00:06:45,565
لم يكتب المستخدم أي معلومات في هذه الحقول بعد لمس الحقل،

104
00:06:45,565 --> 00:06:51,210
فسوف نتأكد من عرض رسالة الخطأ المناسبة للمستخدم.

105
00:06:51,210 --> 00:06:57,469
لذلك، مع هذا الفهم السريع للتحقق من صحة النموذج في Angular،

106
00:06:57,469 --> 00:06:58,970
دعونا ننتقل إلى التمرين،

107
00:06:58,970 --> 00:07:03,410
حيث سنتحقق من كيفية إجراء التحقق من صحة النموذج البسيط

108
00:07:03,410 --> 00:07:08,160
لنموذج تسجيل الدخول الخاص بنا ومن ثم نكون قادرين على عرض رسائل الخطأ.

109
00:07:08,160 --> 00:07:12,470
سنعود مرة أخرى لتشكيل التحقق من الصحة في أحد التمارين اللاحقة،

110
00:07:12,470 --> 00:07:19,660
بعد أن نتعلم المزيد عن الدعم التفاعلي في Angular.