لقد أكملنا للتو التعلم عن النماذج التي تحركها القوالب الزاوي، وأيضا،
في التمرين، شيدت أول نموذج يحركه القالب.
الآن، عندما يقوم المستخدم بكتابة المعلومات في حقول النموذج،
قد نرغب في التحقق من صحة البيانات التي يقوم المستخدم بكتابتها في حقول البيانات هذه.
في الأيام الأولى من الويب،
كانت الطريقة الوحيدة للتحقق من البيانات هي شحن البيانات
إلى الخادم ثم إجراء الفحوصات على جانب الخادم،
ومن ثم الحصول على النتيجة من جانب الخادم.
ولكن في هذه الأيام، مع أطر عمل قوية
من جانب العميل مثل Angular، يمكن إجراء الكثير من التحقق من صحة البيانات
بسهولة على جانب العميل نفسه، ويمكننا بسهولة التقاط الكثير من الأخطاء على جانب العميل،
ومن ثم توفير إشارة للمستخدم حول الأخطاء.
الآن، هذا هو المكان الذي سنلقي فيه نظرة على دعم Angular
للتحقق من صحة النموذج، ثم كيف يمكننا تنفيذ التحقق من صحة النموذج،
ومن ثم عرض رسائل الخطأ للمستخدم في طرق العرض.
يأتي HTML5 بالفعل مع بعض الدعم المدمج للتحقق من صحة النموذج.
ولكن عندما نستخدم Angular لتطبيقنا،
يجب علينا أولاً إيقاف التحقق من صحة نموذج HTML5،
بحيث
يتم نقل مسؤولية إجراء التحقق من صحة النموذج إلى تطبيق Angular.
لذلك، للقيام بذلك للنموذج،
كما رأينا في التمرين في وقت سابق،
نقوم بتضمين سمة novalidate إلى علامة النموذج هناك،
بحيث يضمن ذلك أن الزاوي
يأخذ مسؤولية إجراء التحقق من صحة النموذج.
كيف يساعدنا Angular على القيام بالتحقق من صحة النموذج؟
و هذا ما سندرسه بمزيد من التفصيل بعد ذلك.
عندما تحتاج إلى إجراء التحقق من صحة النموذج في Angular،
خاصة عندما تحتاج إلى الرجوع إلى حقول النموذج داخل القالب الخاص بك،
فأنت بحاجة إلى مساعدة المتغيرات المرجعية للقالب الزاوي.
كيف نحدد متغير مرجع القالب؟
يمكن تحديد متغير مرجع القالب
لأي عنصر عن طريق ربط متغير قالب مثل هذا.
على سبيل المثال، في هذه الحالة للنموذج،
نحن نحدد نموذج تسجيل الدخول يساوي نغفورم.
وبالمثل، بالنسبة لحقل الإدخال على سبيل المثال،
يمكنك أن تقول شرطة مائلة،
أو بالأحرى #username يساوي ngModel.
في هذه الحالة، يكون نموذج تسجيل الدخول واسم المستخدم جميعًا متغيرات مرجع القالب.
يمكن بعد ذلك استخدام هذه المتغيرات المرجعية للقالب داخل
قالب Angular للإشارة إلى هذه الحقول.
لذلك، في القالب نفسه،
يمكنك التحقق من حالات التحكم
لتلك الحقول بما في ذلك أشياء مثل ما إذا كان الحقل صالحًا،
سواء كان قذرًا،
أو أنه يحتوي على بعض الأخطاء.
سوف نستفيد من هذا الدعم الذي تقدمه Angular من أجل القيام بالتحقق من صحة النموذج.
كما ذكرت، سنقوم بالاستفادة من
المتغيرات المرجعية للقالب لجمع حالة التحكم للتحقق من المعلومات.
لذلك، على سبيل المثال، يمكنك أن تقول username.pristine داخل القالب الخاص بك.
لذا، يشير ذلك إلى التحقق من الحالة،
ما إذا كان عنصر التحكم الخاص في الحالة البكر،
مما يعني أنه لم يتم لمسه وتعديله من قبل المستخدم حتى الآن.
القذرة هي عكس البكر،
مما يعني أنه عندما يكون الحقل قذرًا،
فهذا يعني أن الحقل قد تم تعديله من قبل المستخدم في الماضي.
وبالمثل،
تمكننا حالة التحكم الصالحة وغير الصالحة من التحقق مما إذا كانت المعلومات الموجودة داخل هذا الحقل صالحة أم غير صالحة،
اعتمادًا على مواصفات الشيك الخاص
بصحة هذا الحقل أو الحالة غير الصالحة.
لذلك، على سبيل المثال، يمكنك التحقق مما إذا كنت قد أعلنت حقل كما هو مطلوب،
وهذا يعني أنك تتوقع
من المستخدم كتابة بعض المعلومات على الأقل في الحقل.
عدم وجود معلومات داخل الحقل في النموذج الخاص بك يعني أن الحقل غير صالح.
وبالمثل، يمكنك تحديد البر الرئيسي أو الحد الأقصى لطول قيمة الحقل،
بحيث يمكنك بسهولة التحقق مما إذا كان عدد الأحرف
داخل الحقل حول الطول الرئيسي،
أو أقل من الحد الأقصى للطول، وهلم جرا.
في التمرين التالي،
سنطبق هذه النهج المختلفة للتحقق من صحة النموذج
لنموذج يستند إلى القالب الذي قمنا بتصميمه في التمرين السابق.
على سبيل المثال، في النموذج الخاص بك،
يمكنك تعطيل زر الإرسال عن طريق التحقق
لمعرفة ما إذا كان هذا النموذج في حالة صالحة أم لا.
لذلك في هذه الحالة، ستقوم بربط المعطل
وتعيينه مساويًا لنموذج تسجيل الدخول.
form.invald، يعني أنه عندما يكون النموذج غير صالح،
سيتم تعطيل هذا الزر في هذه الحالة.
لذلك، لن يسمح للمستخدم لتقديم المعلومات من خلال هذا النموذج معين.
لذلك، هذه طريقة واحدة للتأكد من أن
الإدخالات غير الصحيحة لن يتم تقديمها من قبل المستخدم من خلال النموذج.
وبالمثل، بالنسبة لحقول محددة،
يمكنك التحقق لمعرفة ما إذا كان قد تم ملء الحقل أم لا.
لذلك، إذا قمت بتحديد أن حقل معين مطلوب
عن طريق تحديد السمة المطلوبة لحقل الإدخال،
ثم يمكنك التحقق لمعرفة ما إذا كان هناك خطأ من
النوع المطلوب أثيرت لعنصر الحقل معين هناك.
لذلك، في التعليمات البرمجية الخاصة بك على سبيل المثال،
يمكنك حتى تحديد لإعلام المستخدم
عن حقيقة أن حقل معين غير صحيح.
يمكنك استخدام خطأ الحصيرة للدلالة على ذلك.
لذا، فإن علامة خطأ الحصيرة، التي تأتي من
، مرة أخرى، دعم نموذج المادة الزاوي كما ترون هنا،
إذا تبين
أن nGiF صحيحة، فسيتم عرض هذه الرسالة أدناه في حقل الإدخال هناك،
وعلى غرار حقل الإدخال،
سيتم وضع علامة حمراء في الشاشة.
لذلك، هذا هو الشيء الذي كنت تسير على التحقق
وضمان وأيضا تسليم رسائل الخطأ للمستخدم.
في التمرين التالي،
سنطبق هذا الأسلوب للتحقق من اسم المستخدم وكلمة المرور.
سنحدد أن هذه الحقول مطلوبة وإذا
لم يكتب المستخدم أي معلومات في هذه الحقول بعد لمس الحقل،
فسوف نتأكد من عرض رسالة الخطأ المناسبة للمستخدم.
لذلك، مع هذا الفهم السريع للتحقق من صحة النموذج في Angular،
دعونا ننتقل إلى التمرين،
حيث سنتحقق من كيفية إجراء التحقق من صحة النموذج البسيط
لنموذج تسجيل الدخول الخاص بنا ومن ثم نكون قادرين على عرض رسائل الخطأ.
سنعود مرة أخرى لتشكيل التحقق من الصحة في أحد التمارين اللاحقة،
بعد أن نتعلم المزيد عن الدعم التفاعلي في Angular.