الزاوي: كيفية تنفيذ التحقق من الصحة الشرطية

لنفترض أن لدينا نموذجًا لملء بعض تفاصيل الأسرة الشخصية: الاسم وتاريخ الميلاد وتفاصيل الشريك وتفاصيل الأطفال.

مثله:

ونريد أن يكون اسم الطفل مطلوبًا ، ولكن فقط إذا كان لدى المستخدم أطفال عندما لا يكون لديه أطفال ، فعليه / عليها تحديد خانة الاختيار: ليس لدي أي أطفال

ونريد أيضًا أن يكون تاريخ ميلاد الطفل مطلوبًا ، فقط في حالة ملء اسم الطفل.

لذا ، اكتب عملية تحقق مخصصة مطلوبة إذا كان هناك إدخال منطقي ، إذا كان الإدخال صحيحًا ، فيجب أن يكون عنصر التحكم ذا قيمة.

هذا مدقق بسيط للغاية:

وهنا هو الشكل الخاص بي:

ولكن مع هذا التطبيق ، إذا قمت بالتحقق من إلغاء تحديد خانة الاختيار "لا يوجد أطفال" وإلغاء تحديدها مرة أخرى دون لمس عنصر التحكم ، فلن يتم تغيير حالة التحقق من الصحة.

هنا هو السلوك المكسور:

يظل عنصر التحكم في اسم الطفل غير صالح ، وأيضًا إذا حددت مربع الاختيار "لا يوجد أطفال" ، فإن الزاوي لا يعرف الحاجة إلى إعادة التحقق من الصحة.

نفس الشيء بالنسبة لتاريخ الولادة ، لأنه في البداية ، كان الاسم فارغًا ، ثم كان تاريخ الميلاد صالحًا ، حتى لو قمت بملء الاسم. وأتوقع أن يكون تاريخ الميلاد غير صالح الآن.

يتم تغيير حالة التحقق من الصحة للتحكم فقط في حالة تغيير قيمة التحكم ، وليس في حالة تغيير إدخال التحقق من الصحة.

ماذا سيكون الاختراق؟

دعنا نرى واجهة المدقق:

ما هو الغرض من الطريقة الثانية؟

هذه الطريقة هي نقطة نهاية للزاوي لتسجيل التحقق من صحة وظيفة تغييرها إلى تنفيذ المدقق ، ويمكن للمدقق أن نسميها عندما تريد رفع التحقق من صحة تغيير ، على سبيل المثال ، إذا تم تغيير إدخال التحقق من الصحة.

لننفذ هذا في المدقق:

عندما يكون هناك تغيير في إدخال التوجيه requIf ، فإننا ندعو this._onChange () التي سجلت الزاوي لنا. ومن ثم يعرف الزاوي أنه يحتاج إلى إعادة التحقق من الصحة ويتم تغيير الحالة.

الآن ستعمل ، اتبع لون الحد الأحمر الذي يشير إلى حقل غير صالح ، وانظر إلى أنه يصبح غير صالح وصالح أيضًا عندما لا أتطرق إلى ذلك.

انظر المثال رمز كامل

تحقق من إبطال الزاوي المدمج. وتجد أنها تنفذها كما هو موضح أعلاه. على سبيل المثال maxLength:

شكل رد الفعل

جيد حتى الآن ، ولكن كيف ستعمل في شكل رد الفعل؟ عندما لا يكون لديّ أي توجيه ، فقط validatorFn:

المشكلة هنا هي أن validationFn ، التي أستخدمها لبناء عنصر تحكم النموذج ، يجب أن تُرجع دالة ، يمكن الحصول عليها فقط للتحكم في النموذج ، لا يعني أي إدخال ، يمكن تعريف الإدخال في الإغلاق ، لكن لا يمكن تغييره ...

ما لم يتم إدخال كائن قابل للتغيير ...

دعنا نجعلها قابلة للتغيير

هنا ، إذا قمت بتغيير القيمة المطلوبة إذا كانت طريقة التحقق من الصحة يمكن أن تعمل مع القيمة المحدّثة ، ولكن لا يزال ، لن يتم إلغاؤها ، فقط عندما أتطرق إلى عنصر التحكم نفسه ، بأشكال تفاعلية ، لا أستطيع القيام بالاختراق الموصوف أعلاه ، لأنني لم استخدم التوجيه على الإطلاق.
الطريقة التي وجدت بها هي تسجيل تغييرات المدخلات ، واستدعاء control.updateValueandValidity () والتي تلغي دورة التحقق من الصحة.

انظر هي مشكلة فتحتها في جيثب تصف هذه المشكلة.

أيضا ، هنا هو نفس الرمز في شكل رد الفعل ، معقدة للغاية ، وآمل أن يتم حل المشكلة المذكورة أعلاه وسيكون أسهل.