الحقول المرتبطة (Linked Fields)

الدرس 11 من 21 · دورة TanStack Form الكاملة · 3 دقيقة و40 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

مستودع شيفرة هذا الدرس

الفرع: validation-5

[00:01] أن يعتمد بعضُ الحقول على حقلٍ آخر. فمثلًا فلنقل أنّه لدينا — تذكّر أنّ في نموذجنا لدينا كلمةَ السر وتأكيد كلمة السر — ومن أجل أن نتحقّق من صحة حقل تأكيد كلمة السر، نعتمد على كلمة السر، وكذلك أيضًا عندما

[00:16] نُغيّر كلمة السر، يلزمنا تحديث التحقّق من الصحة (validation) الخاص بتأكيد كلمة السر وما إلى ذلك.

[00:22] إذًا أولاً، لا تتوفّر هذه الحقول بعد في واجهة المستخدم (UI) لدينا. فلنضِفها إذًا.

[00:25] سألصق هذه الحقول بسرعة، لأنّنا سبق وقد أنجزنا شيئًا مشابهًا. فلنضعها هنا، ربما بعد هذا الحقل street الذي لدينا هنا. فإذًا لدينا street. فلنقل ربما أنّني بعد street لدينا سألصق

[00:38] بضعة حقول هكذا. فيكون لدينا حقل كلمة السر الذي يتضمّن input من النوع password، ونمرّر كلَّ شيءٍ على غرار ما فعلناه في الحقول الأخرى، والأمر ذاته بالنسبة إلى تأكيد كلمة السر أيضًا. فيكون لدينا الآن إذا

[00:53] حفظتُ هذا فسأمتلك كلمةَ السر وتأكيد كلمة السر. وفي تأكيد كلمة السر قد يوجد لدينا خطأ إذا لم تتطابق كلمتا السر. وسأنسخ فقط كيفية عرض الخطأ هنا من حقلٍ آخر، وكذلك

[01:09] سأعرض هذا الخطأ في حقل تأكيد كلمة السر لديّ. والآن في حقل تأكيد كلمة السر لنضِف validators الخاصّة بنا. إذًا في validators سأضيف كائنًا، وفلنقل فلنفعل ذلك مثلًا عبر onChange في كل

[01:21] مرةٍ نكتب فيها، يلزمنا التأكّد من أنّ كلمتَي السر نفسِهما، أي كلمة السر الأساسية وتأكيد كلمة السر. فسيتوفّر لنا هنا دالة، وفي الدالة لدينا بضعة أشياء. فلدينا value الخاص بالحقل، غير أنّه

[01:34] تذكّر — عذرًا — تذكّر أنّ لدينا أيضًا واجهةَ برمجة الحقل (field API). ستكون value هي قيمة تأكيد كلمة السر. ولأخذ قيمة كلمة السر كي نستطيع مقارنتهما، يمكننا استخدام واجهة برمجة الحقل هذه. فإذًا يمكننا هنا أن نفحص إذا

[01:50] كانت القيمة لا تساوي، ومن ثمّ يتوفّر لنا في field API الوصول إلى النموذج، وفي النموذج يتوفّر لنا الوصول إلى دالةٍ تُدعى getFieldValue نستطيع من خلالها الحصول على قيمة أيّ حقل.

[02:03] في حالتنا يلزمنا الحصول على قيمة كلمة السر. فإذا لم تتطابقا، فيلزمنا أن نعيد خطأً. فلنعيد: passwords do not match. وإلا فنحتاج فقط إلى أن نعيد undefined، وهو ما يعني أنّه لا تتوفّر لدينا أيّ أخطاء. وهذا

[02:18] سيعمل. فإن كتبنا مثلًا 1 2 3 4 هنا و1 2 هنا، فسنحصل على خطأنا.

[02:24] غير أنّه إذا كتبتُ 1 2 3 4 فلا ينبغي أن نحصل على الخطأ. غير أنّه الآن إذا غيّرتُ كلمةَ السر الأساسية إلى 1 2 3 4 5 مثلًا، فلم تعودا تتطابقان. غير أنّه لن يحدث التحقّقُ من الصحة الخاص بتأكيد كلمة السر؛ فهو لن يُنفَّذ لأنّنا

[02:40] لم نُغيّر تأكيد كلمة السر.

[02:42] غير أنّنا غيّرنا كلمة السر.

[02:44] غير أنّه يمكننا أن نجعل التحقّق من الصحة الخاص بتأكيد كلمة السر يتغيّر عندما تتغيّر كلمة السر الأساسية، وذلك بفعل شيءٍ ما في validators هنا. يمكننا وضع onChangeListenTo، ومن ثمّ يمكننا الاستماع إلى، يمكننا تمرير مصفوفة هنا ونستطيع

[03:00] الاستماع إلى حقولٍ أخرى عندما تتغيّر. وفي حالتنا يلزمنا الاستماع إلى password.

[03:05] وهذا يعني أنّ التحقّق عبر onChange الخاص بتأكيد كلمة السر سينفَّذ أيضًا عندما تتغيّر كلمة السر. فإذا حفظنا هذا، فإن كتبنا الآن هنا، فلن يعمل الأمر الآن. وربما يلزمني تجديد (refresh) أو ما إلى ذلك. فلنكتب إذًا 1 2 3 4 وربما

[03:22] 1 2 3 4، ثم نُغيّر هذا إلى 5. والآن التحقّق من الصحة الخاص بتأكيد كلمة السر يعمل، على الرغم من أنّنا لم نُغيّر تأكيد كلمة السر نفسه، غير أنّنا غيّرنا الآخر، أي كلمة السر الأساسية، وطبعًا إضافةً إلى onChangeListenTo

[03:37] تتوفّر عندنا onBlurListenTo كذلك أيضًا.