מדריך אנגולר | reactive forms – ארכיטקטורה ובנייה נכונה

השיעור הזה והשיעורים הבאים ככל הנראה יהיו יותר פרקטיים, והגיע הזמן ללכלך את הידיים שלנו ולבנות קצת טפסים!.

אז קודם כל, נתחיל אם ארכיטקטורה.

ארכיטקטורה היא שם המשחק בכל דבר, ובטח בעולם שלנו כמתכנתים,תכנון ומבנה הם השלב הראשוני לפני שורות הקוד ולמעשה זוהי עבודה כשלעצמה (אבל בישראל אנחנו המתכנתים נדרשים לעשות הכל מהכל חחח) בכל מקרה קרה לי פעמים רבות שבניתי טופס מורכב ופתאום נתקלתי בבעיות של ארכיטקטורה לקוייה וזה סיבך את העבודה ואף לבסוף הייתי נאלץ לבנות מחדש את הטופס… אז בשביל שתלמדו מטעויות של תנין, אציג פה דוגמה אחת מורכבת יחסית שתלווה אותנו לאורך המדריך . להלן הטופס שעליו נעבוד:

כנסו לדוגמה של הטופס ושחקו איתה קצת

טופס מעניין, אפשר ישר לגשת לכתוב אבל נעצור לרגע ונסיק מסקנות חשובות:

1. פירוק השדות לform controls , form group, form array
2. וולידציות – אילו וולידציות יש להשתמש\לקאסטם ואילו שדות קשורים לאותם ולידציות (למשל טלפון מורכב מ2 שדות, אימייל ואימייל בשנית)
3. פונקציות נוספות – הסרה והוספה של שדות , למשל כאשר נבחר הרדיו של "מובטל" מופיע שדה נוסף של תאריך וגם הוא עם וולידציה.

בגדול אלו הדברים שאתם רוצים לקחות בחשבון. מקרה נוסף שנרצה לשים לב, אם קיים מידע באובייקט (למשל בעריכה – לא במקרה שלנו..), היינו רוצים לבדוק אם קיים מידע באובייקט של הטופס ולטעון אותו. נראה את זה גם בהמשך המדריך ככה שנעבור על הכל מהכל :).

בואו נבין מה קורה פה בעצם, תוך כדאי בניית הטופס.

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

אז הנה הצצה קטנה לתוך הטופס בקובץ ה-TS . אומנם מדובר בטופס פשוט , אבל אפשר לראות שהבניה של הטופס נבנה לפי שדות שיש להם איזה מכנה משותף כזה. זה רק חלק מהקובץ , בהמשך אשים את כל הקבצים המלאים של הטופס הזה . בנתיים חשוב להבין את המבנה:

public jobRegistrationForm : FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.jobRegistrationForm = this.fb.group({
      fullName: [''],
      phoneForm: this.fb.group({
        number: [''],
        prefix: ['']
      }),
      emailForm : this.fb.group({
        email: [''],
        reEmail: ['']
      }),
      jobStatus: [''],
      termsApproved : ['']

    });
  }

זהו זה ! למעשה זה נראה פשוט אבל תחשבו שיש לכם טופס גדול יותר, עם שלבים (wizard) או כל טופס מורכב אחר. ככל שתתכננו טוב יותר את הטופס שלכם יהיה לכם מאד קל בהמשך.

יכול להיות שחלקכם מכירים ולא מבינים או לא הכי מסכימים עם התכנון הזה, יכול להיות שיש תכנון יותר טוב , וכן עשיתי פה כמה דברים EXTRA בשביל שהדוגמה תציג את הקונספט יותר מאשר להציג בעיה של משהו מאד מורכב. וכן בהמשך שיכנסו הוולידציות (ואתם לא תאמינו אילו וולידציות מטופרות הלקוחות עשויים לבקש!!) אז תראו איך זה מסתדר לנו יופי יופי 😀🐱‍🐉

פוסטים קשורים:

מדריך אנגולר | reactive forms – בסיס לבניית הטופס המגיב. מדריך אנגולר | סיכום מיני קורס אנגולר reactive forms מדריך אנגולר | reactive forms – ולידציות וחיווי בUI מדריך אנגולר | reactive forms – חיבור הטופס הריאקטיבי לתצוגת הטופס