לדלג לתוכן

7.9 טפסים React Hook Form ו Zod תרגול

תרגול - טפסים - React Hook Form ו-Zod

תרגיל 1 - טופס הרשמה בסיסי

צרו טופס הרשמה עם React Hook Form ו-Zod.

דרישות:
- שדות: שם פרטי, שם משפחה, אימייל, סיסמה, אישור סיסמה, תאריך לידה
- ולידציות: שם פרטי ומשפחה (לפחות 2 תווים), אימייל תקין, סיסמה (לפחות 8 תווים, אות גדולה, ספרה, תו מיוחד), אישור סיסמה תואם, גיל מינימלי 16
- הצגת שגיאות מתחת לכל שדה
- כפתור Submit מושבת בזמן שליחה
- הצגת הודעת הצלחה אחרי שליחה מוצלחת
- ניקוי הטופס אחרי שליחה

תרגיל 2 - טופס כתובת עם אובייקטים מקוננים

צרו טופס הזמנה עם מידע אישי וכתובת משלוח.

דרישות:
- סכמה מקוננת: personal (firstName, lastName, phone), shippingAddress (street, city, zip, floor), billingAddress (same fields)
- צ'קבוקס "כתובת חיוב זהה לכתובת משלוח" - כשמסומן, כתובת החיוב מוסתרת ומועתקת מכתובת המשלוח
- ולידציה: טלפון ישראלי (מתחיל ב-05, 10 ספרות), מיקוד (7 ספרות), שדות חובה
- השתמשו ב-watch לתצוגה דינמית

תרגיל 3 - טופס עם מערך דינמי

צרו טופס יצירת מתכון עם רשימת מרכיבים דינמית.

דרישות:
- שדות: שם המתכון, תיאור, זמן הכנה, רמת קושי (enum), קטגוריה
- מערך מרכיבים: כל מרכיב כולל שם, כמות ויחידת מידה
- לפחות מרכיב אחד, מקסימום 20
- כפתורי הוספה והסרה
- מערך שלבי הכנה (instruction steps) - כל שלב הוא טקסט
- ולידציה מלאה עם Zod
- Preview בצד - מציג את המתכון בזמן אמת עם watch

תרגיל 4 - טופס רב-שלבי (Multi-Step Form)

צרו טופס רב-שלבי (wizard).

דרישות:
- שלב 1: פרטים אישיים (שם, אימייל, טלפון)
- שלב 2: העדפות (קטגוריות מועדפות, תדירות עדכונים, שפה)
- שלב 3: פרטי תשלום (מספר כרטיס, תוקף, CVV)
- שלב 4: סיכום ואישור
- ולידציה בכל שלב לפני מעבר הלאה
- אפשרות לחזור אחורה בלי לאבד נתונים
- פס התקדמות (progress bar) שמציג באיזה שלב נמצאים
- שמירת טיוטה ב-localStorage

תרגיל 5 - טופס עם ולידציה אסינכרונית

צרו טופס עם ולידציות שדורשות פנייה לשרת.

דרישות:
- שדה username עם בדיקה אם השם תפוס (סימולציה של API call)
- הצגת loading spinner בזמן הבדיקה
- debounce על הבדיקה (לא לבדוק בכל הקלדה)
- שדה אימייל עם בדיקה דומה
- שילוב ולידציה סינכרונית ואסינכרונית

תרגיל 6 - מערכת טפסים מלאה (מתקדם)

צרו מערכת ניהול טפסים דינמית.

דרישות:
- הגדרת טופס דרך JSON/config (לא hardcoded)
- סוגי שדות: text, email, number, select, checkbox, textarea, date, file
- ולידציות מוגדרות ב-config (required, min, max, pattern)
- יצירה דינמית של סכמת Zod מה-config
- תמיכה ב-conditional fields (שדה שמופיע רק בתנאי)
- ייצוא ה-config כ-JSON

שאלות

  1. מה היתרון של React Hook Form על פני Formik או טפסים ידניים מבחינת ביצועים?
  2. למה כדאי להגדיר את הסכמה ב-Zod ולא בולידציה של React Hook Form ישירות?
  3. מה ההבדל בין mode: "onChange" ל-mode: "onBlur" ב-useForm?
  4. איך useFieldArray שומר על ביצועים טובים כשיש הרבה פריטים במערך?
  5. מה היתרון של z.infer על פני הגדרת interface ידנית?