[MUSIC]
اسمحوا لنا أن نعرف بإيجاز أشكال ونماذج الدعم في Angular.
لقد رأينا بالفعل استخدام النماذج في دورة bootstrap السابقة
ورأينا كيف يتيح لنا Bootstrap تصميم أشكال HDMI القياسية.
في هذا الدرس، سوف ننظر إلى الدعم الزاوي للأشكال،
نوعين مختلفين من الأشكال، الأشكال التي تحركها القوالب والأشكال التفاعلية.
سنلقي نظرة على الفرق بين الاثنين،
وحيث يكون كل واحد منهم مناسبًا داخل تطبيقنا الزاوي.
سننظر في مزايا وعيوب كل نهج
بمزيد من التفصيل في هذا الدرس والدرس التالي.
أيضًا، سننظر في التحقق من صحة النموذج، وكيف يدعم Angular التحقق من صحة النموذج،
وكيف يمكننا إجراء التحقق من صحة النموذج الخاص بنموذج يستند
إلى القالب في المحاضرة التالية، بعد التمرين.
لقد أدركنا بالفعل أن النماذج تدعم
تجربة إدخال بيانات متماسكة وفعالة ومقنعة للمستخدمين.
ترى النماذج المستخدمة في كل مكان على مواقع الويب.
على سبيل المثال،
عندما تحتاج إلى تسجيل الدخول إلى موقع ويب، يجب عليك كتابة معرف المستخدم وكلمة المرور الخاصة بك.
أو عندما تحتاج إلى تقديم معلومات على سبيل المثال.
إذا كنت تحجز تذكرة فيلم، أو إذا كنت تضع
طلبًا في متجر بقالة على الإنترنت، أو العديد من حالات الاستخدام الأخرى،
يتم استخدام النماذج على نطاق واسع لتوفير طريقة شاملة
للمستخدمين لإدخال المعلومات في مواقع الويب أو تطبيق الويب.
يوفر إطار العمل الزاوي دعمًا شاملاً
للنماذج، بما في ذلك التحقق من صحة النماذج والنماذج.
هذا هو المكان الذي نستفيد فيه من دعم Angular لربط البيانات في اتجاهين
وتتبع التغييرات التي نجريها في عناصر النموذج، وكذلك التحقق من صحة النموذج.
لذلك عند إدخال البيانات في حقول الإدخال في النموذج الخاص بك،
يتم تقييم البيانات تلقائيًا مع دعم Angular للنماذج.
سنلقي نظرة على بعض هذه بمزيد من التفصيل بينما نذهب من خلال الدروس.
اسمحوا لي أن أذكركم بسرعة من أشكال HTML أنفسهم.
أنت تعرف بالفعل أن النماذج معتمدة من خلال
عنصر النموذج في صفحة HTML الخاصة بك.
جنبا إلى جنب مع عنصر النموذج، داخل علامة النموذج، يمكنك أيضا تضمين أشياء
مثل ، ، ، و s، وغيرها الكثير.
سنرى كيف يؤدي الدعم الزاوي مع
عناصر نموذج HTML، مما يمكننا من تصميم نوعين مختلفين من الأشكال، والأشكال التي
تعتمد على القالب، وكذلك الأشكال التفاعلية في Angular.
في هذا الدرس، سوف نركز على الدعم الزاوي للأشكال التي تحركها القوالب.
في نموذج يستند إلى القالب، سيستخدمون القالب Angular مع
عناصر النموذج التي رأيناها للتو لتكون قادرة على بناء النماذج
والاستفادة من الدعم الزاوي للنماذج التي تعتمد على القالب.
وسوف نكون قادرين على ربط التوجيهات الخاصة بالنموذج الزاوي
بعناصر النموذج داخل القوالب الخاصة بنا، ومن ثم الاستفادة من ربط البيانات ثنائي الاتجاه
التي تشكل أيضًا دعم التحقق والخطأ الذي يوفره Angular لنا.
في التمرين التالي على الفور،
ستنظر هذه المحاضرة في كيفية تصميم نموذج يحركه القالب. على
وجه الخصوص، سننظر أيضًا في كيفية استخدام ربط البيانات ثنائي الاتجاه مع
دعم Angular، باستخدام توجيه ngModel
لربط المعلومات من النموذج الخاص بك
ببعض متغيرات JavaScript التي أعلنتها داخل فصولك الدراسية.
في التمرين الذي يتبع هذه المحاضرة مباشرة،
ننظر في كيفية تصميم نموذج يحركه القالب. على
وجه الخصوص، سننظر في كيفية
الاستفادة من ربط البيانات ثنائي الاتجاه الذي يدعمه Angular باستخدام توجيه ngModel لربط المعلومات من
النموذج الخاص بك إلى بعض متغيرات JavaScript التي تعلن عنها داخل فصولك الدراسية.
وهذا هو المكان الذي
يأتي الموز في مربع الذي أشرنا إليه في وقت سابق مع توجيه نغموديل لمساعدتنا.
بينما نذهب من خلال التدريبات، هذا سوف يصبح أكثر وضوحا.
الآن دعونا نتعلم كيفية الاستفادة من الدعم الزاوي
لأشكال مدفوعة القالب من أجل تصميم أشكالنا في التدريبات.
[ موسيقى]