מדריך אנגולר reactive form – יוצאים לדרך.

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

כל הקישורים לפרקי המדריך אנגולר reactive form

הקדמה קצרה ומיד מתחילים

אז אנגולר כפריימוורק (Frame Work) , מציע פתרונות לטיפול בטפסים והוא מציע לנו 2 אפשרויות:

1. Reactive Forms
2. Template Driven Forms

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

אז כאחד שבא דווקא מעולמות של JS וריאקט (ReactJS) שאינך מסתמך על איזה משהו מוכן וארוז היטב. אתה לרוב יוצר דברים בעצמך .

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

טוב יאללה לעבודה – Angular Reactive Forms

המדריך הולך להתמקד בReactive Forms של אנגולר כי הוא המורכב וה"מסובך" יותר. וככל הנראה השימושי יותר בחייכים כתניני קוד שאוהבים frontend.

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

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

רשימת כל המרכיבים והמושגים שיש להכיר בעובדה עם Reactive Forms:

יש לוודא שאתם טוענים את:

import { ReactiveFormsModule } from '@angular/forms' – מבלי שתוסיפו לקבוץ המודולים app.module.ts לא תוכלו להשתמש בשום רכיב השייך ל-Reactive Form.

אפשרויות בבניית טופס ריאקטיבי:

כשנבנה טופס תוכלו לשים לב שנשתמש בהגדרות להלן:

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

• FormGroup | להגדיר קבוצה של FormControl , כמקשה אחד, המידע יאסף כקבוצה(כאובייקט – דוגמה: {first: 'cod, last: 'codile'}) וכן ולידציות או חיוויים.
• FormArray | הגדרה של FormControls במערך, כך שאפשר לבנות מערך של מידע מתוך מספר פקדים, או לדוגמה הוספה והסרה של מידה לטופס שישמר במערך. FormArray הוא אבן הבניין השלישית לעבודה עם Reactive Form.

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

עברו לפוסט הבא