Reactive Form
פרקי ההרצאה: Reactive Form
תמלול ההרצאה: Reactive Form
הטקסט המלא של הדקות הראשונות בהרצאה «Reactive Form» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם, אנחנו עולים ליגה לליגה מקצועית ועוברים ל-reactive forms. עד עכשיו היינו בנהיגה באוטומט, ב-template driven forms, הכוונה שעשינו הכל על ידי NG model שבעצם עשה לנו את כל העבודה.
כל מה שהיינו צריכים לעשות זה למעשה לעשות פורם רגיל ו-NG model ו-NG model היה עושה לנו הכל ולא היינו מתעסקים בקרביים של הטפסים. עכשיו זה טוב בשביל משהו פשוט כמו לשייך ערך לפקד במסך, אבל זה לא מתאים אם אני רוצה לשכפל פקדים, אם אני רוצה לעשות ולידציה על שתי שדות במקביל שהאימייל הוא זהה, כל מיני דברים מסובכים.
לדוגמה, לבדוק מול שרד שכתובת האימייל לא תפוסה, כשלקוח חדש רוצה להזין לי אימייל במעמד ההרשמה, כל מיני דברים מסובכים.
אז מה אנחנו הולכים לעשות? אנחנו הולכים לעשות ולידציה של שני שדות ביחד שהאימייל הוא זהה. אנחנו הולכים לעשות שדה של טלפון שאני יכול לשכפל אותו הרבה פעמים במסך, והלקוח יכול להקליט כמה טלפונים שהוא רוצה, שיהיה שכפול דינמי של פקדים.
אנחנו הולכים לעשות בדיקה אסינכרונית מול השרת שכתובת המייל לא תפוסה. אנחנו הולכים גם לעשות ולידטורים דינמיים. זה אומר להוסיף ולידטור בדיקה אם מתקיים תנאי כלשהו, ולהוריד את זה אם מתקיים תנאי אחר.
כאילו לעשות ולידטורים דינמיים. אנחנו הולכים להוסיף כפתור איך ליצור עם הלקוח קשר. ואם הוא בוחר סמס, אז אנחנו מחייבים אותו שיהיה טלפון.
הוא בוחר אימייל אז אנחנו מחייבים אותו שיהיה אימייל אבל לא טלפון כאילו החיוב של הטלפון האם השדה הזה רחובה או לא ייקבע לפי הבחירה שלו במסך הנושאים המתקדמים האלו צריכים בעצם להכניס את הידיים לתוך הכרביים של המערכת ולרדת מהרעיון הזה של NG מודל שעושה לי הכל באוטומט למעשה הוא עושה פעולה פשוטה של שיוך משתנה
לפקד במסך חיבור דו-כיווני עכשיו זה מצוין למקרה פשוט כמו שהיה לי אבל עכשיו עכשיו הגיעה הדרישה מהבוס לשדרג את המערכת להוסיף שדות של טלפון שיהיה אפשר יהיה להוסיף כמה טלפונים שהלקוח רוצה שאפשר יהיה גם להוסיף ולידציה לפי אימייל וגם אפשר יהיה לבחור איך יוצרים קשר עם הלקוח ואם יוצרים דרך הטלפון השדה של הטלפון חייב להיות ברקוויירד כאילו
שחייבים למלא אותו שדה חובה טוב חברים מקווה שהלהבתי אתכם ואנחנו עוברים לליגה מקצועית מה שעשינו עד עכשיו זה היה בעצם טמפלייט דריבן פורם ורציתי רציתי לסכם את הנושא בטבלה הזאת שיש פה באתר של אנגולר שמסבירה את זה מאוד מסודר האם לחצנו קליק בתוך הרכיב אז יש לו touched ו-untouched
ברגע שאני משנה אותו שהוא לא מקורי זה dirty בפרסטין פרסטין זה אומר טהור ויש כפתור של reset אני יכול לעשות form.reset ואז הכל חוזר לקדמותו פרסטין זה אומר שהוא טהור זה אומר שאף אחד לא שינה אותו מרגע טעינה ו-valid זה אומר שהוא עונה על כל הוולידטורים ואנחנו הולכים להוסיף ולידטורים ידנית ולעשות גם ולידטור של שמות אסורים במערכת,
כל מיני ולידטורים ידניים. אז הטבלה הזאת מסכמת לנו את הנושא של Template TD Forms, ואנחנו עוברים ל-Reactive Forms.
זה למעשה שתי הצורות שיש, יש או טמפלט או ריאקטיב. ריאקטיב זה אומר שאנחנו הולכים לעשות הכל ידנית. מה זה הכל ידנית? בואו אני אראה לכם לפני שאנחנו נתחיל.
אני שם פה ב-Checkout דבאגר. ברגע שאני לוחץ צ'ק אאוט, אני רוצה להראות לכם מה קורה מאחורי הקלעים. הטופס שלי, כך הוא נראה, ואנחנו יכולים פשוט לעשות את כל זה עדנית.
אז יש אובייקט שיש בפנים קונטרולס, ובתוך הקונטרולרים יש את הרכיבים, ובתוך הרכיבים לכל אחד יש את ה-State שלו, אוקיי? שימו לב, זה פורם קונטרול של אנגולר.
ככה בנו, אז יש איזושהי קבוצת M, כן, שיש בתוכה הרבה קונטרולרים, שזה קונטרולרים לא של HTML, זה קונטרולרים של אנגולר, זה אובייקטים של אנגולר שמהם עוטפים את הקונטרולר המקורי, את האובייקט המקורי של דפדפן והם מוסיפים כל מיני שדות, לדוגמה אם זה dirty, אם הוא disabled, אם הוא invalid, שימו לב יש invalid ויש valid, הם שתי בני זוג,
אם זה false אז זה true ויש touched, untouched, יש ולידטורים, שזה בעצם הבדיקות שצריך לעשות על הרכיב ולקבוע אם הוא תקין או לא יש פה value changes שזה לעקוב אחרי כל השינויים שקורים ברכיב וvalue זה הערך הנוכחי שלו.
אז בעצם לכל רכיב יש את ה-form control שלו שמי שבנה אותו עבורנו לא עשינו את זה ידנית כי אנחנו עדיין לא ב-reactive forms מי שעשה עבורנו form control והצמיד אותו לרכיב מעליו שזה למעשה הטופס שלי זה מה שהיה ב-NG model עושה לי.
עכשיו בגלל שאני הולך למחוק את ה-NG model אנחנו הולכים לעשות את כל זה ידנית לבד. אז בואו נתחיל אז אני מוחק פה את ה-NG מודל הזה אבל לפני כן אנחנו צריכים לייבא מהמודול את הרכיב הזה ריאקטיב פורמס אני צריך לייבא אותו אז בואו נלך למודול שלי ונשים פה ריאקטיב פורמס מודול שימו לב אני משתמש בו זמנית בשני המודולים זה לא מפריע לי שיש אחד אני יכול
להשתמש בשתיהם בו זמנית אז יש לי גם ריאקטיב פורמס וגם הפורמס הרגיל זה הטמפלייט דריבן פורמס וזה הריאקטיב פורמס יפה מאוד אחרי זה נוכל אפילו להעיף את זה שנעבור לגמרי לריאקטיב אז הבאנו את הריאקטיב פורמס ועכשיו אנחנו מתחילים לבנות בעצם את כל הטופס הזה מההתחלה לא יהיה לנו יותר NG פורום אנחנו הולכים לעשות את הכל לבד אז בוא נתחיל לעשות את זה בטייפ סקריפט עכשיו למה השליטה שלנו הרבה יותר
טובה בגלל שאנחנו עושים הכל בקוד לבד אז יש לנו שליטה הרבה יותר גבוהה והרבה יותר קל לדבק וגם יש הרבה יותר אפשרויות טכניות זה כמו נהיגה באוטומט ונהיגה בידני דבר ראשון אני עושה צ'ק אני מכריז על המשתנה צ'ק אאוט פורם.
זה הולך להיות משתנה חדש והוא יהיה מסוג פורם גרופ. פורם גרופ זה למעשה הקבוצה הזאת שאליה אנחנו משייכים את הרכיבים הקטנים יותר.
עכשיו הוא כותב לי שהוא לא יודע מה זה פורם גרופ. כל מה שאני מסביר לכם נמצא פה, את כל זה אני קראתי מפה ואם אתם רוצים אתם יכולים ממש לראות את זה.
הנה זה מה שהם עושים פורם גרופ והנה הם מוסיפים פורם קונטרול ופורם גרופ. כל זה אני לוקח מכאן מי שרוצה לעקוב אחריי אני לוקח את זה מאתר של אנגולר אבל אני עושה דוגמה משלי יופי הבאנו את הפורום גרופ ועכשיו אנחנו מתחילים בעצם לבנות אותו ב-NG on init בזמן ההתחול של הרכיב אנחנו הולכים לבנות
צ'ק אאוט פורום וזה הולך להיות ניו פורום גרופ ואני בסוגריים מעביר לו בעצם את הרכיבים את הקונטרולס שלו אני מעביר לו אז בואו נתחיל להעביר לו את האובייקט עם כל הרכיבים בתוך הטופס שלי, מה יש לי דבר ראשון בטופס שלי?
יש לי דבר ראשון את הרכיב name. אז בואו נקרא לו name, אבל אני רוצה ככה שיהיה ברור, אז אני אקרא לו form-control-ctrl. זה השם שלו, וזה הולך להיות new, שימו לב, form-control.
זה למעשה מה שראינו בדבאגר, זוכרים? הנה עדיין הדבאגר כאן. שימו לב, הטופס שלי זה form-group, אתם רואים פה זה form-group, ובתוך ה-form-group יש קונטרולרים, הקונטרולרים זה פורום קונטרול.
אתם רואים, יש פורום גרוף ופורום קונטרול. אנחנו למעשה בונים את העץ הזה של אנגולר שעומד מאחורי הטופס באופן ידני. אז אני נותן לזה שם טכני אחר, פורום קונטרול, ובסוגריים אני יכול לתת לו ערך ברירת מחדל, נניח ערך ברירת מחדל שיהיה ג'ון, פסיק איזה ולידטור אני רוצה.
אני רוצה לדוגמה ולידטור required. ולידטור נקודה, הוא לא יודע מה זה ולידטור, מייבא נקודה required. ככה אני אמרתי לו שזה חובה למעשה אני בונה את הרכיב הזה באנגולר מאחורי הקלעים ואני אחרי זה אשייך את זה לכאן מה יש לי גם פאטרן יש לי בוא נעשה גם פאטרן עכשיו כדי להכניס שני ולידטורים טוב נעשה את זה אחרי זה עוד דקה נעשה את זה בוא נעשה עוד אחד ואז נבין מה קורה פה נעשה עוד אחד השני מה הוא השני
השני הוא אדרס נעשה פה אדרס פורום קונטרול אני קורא לזה פורום קונטרול ככה שנדע שמדובר בעצם על אני עושה אובייקט ובפנים את כל הטפסים, טוב, את ברירת מחדל לא תהיה לי, וזה יהיה גם Required, אוקיי? וככה אני בונה אותם.
מה יש לי שם עוד? צ'קבוקס. אוקיי, בואו נעשה גם צ'קבוקס. נקרא לזה צ'קבוקס פרוליסי פורם קונטרול, ושיהיה גם Required, אני יודע מה. אוקיי, וזהו, בכפתור של סבביט.
אז בעצם עשינו את הדבר הפשוט, עשינו ולידטורים פה. עכשיו אם אני רוצה לשים כמה ולידטורים על הרכיב הזה כמו שאמרנו בפאטרן פה אז מה שאני עושה זה דבר כזה אני הופך את זה לשימו לב מה יכול להיות פה פה יכול להיות ולידטור אחד ולידטור פאנקשן אחד או מערך של ולידטור פאנקשן אתם רואים זה או זה כרגע יש לי ולידטור
פאנקשן בודד ועכשיו יש לי מערך של ולידטור פאנקשן אז אני עושה פה בעצם מערך רק שעושים את זה קצת אחרת ולידטורס נקודה פאטרן נעשה את זה ככה, וזה מעבירים לו בסוגריים, הרי זה פונקציה.
רג אקספריישן, אתם רואים? אני מעביר לו את זה כרגולר אקספריישן. אז שמתי פה מערך של ולידטורים, ואני יכול לשים פה פסיק ולשים ולידטור אסינכרוני.
ולידטור אסינכרוני זה אומר שהוא לא מעכב את העבודה של הרכיב, אבל כשתגיע התשובה מהשר"ט, לדוגמה אם כתובת המייל תפוסה, אז הוא יעדכן את המסך בהתאם ואת כל המצב של הרכיב בהתאם, אבל בינתיים הכל ממשיך עד שלא תגיע תשובה מהשר"ט.
אנחנו נדבר על הוולידת הרוסינכרוני בהמשך. טוב, אז עשינו בעצם ככה, אז עשינו רכיבים, עכשיו צריך לשייך את כל זה למסך. צריך לשייך את כל הדבר הזה, וזה חד-כיווני, אני בעצם משייך את זה לשם, ואני לא מקבל תשובה חזרה בלייב.
איך לקבל תשובה חזרה בלייב, אני אראה לכם בהמשך. טוב, אז אנחנו בעצם עוברים עכשיו ל-HTML ומתחילים לעשות פה סדר.
אז ככה, ng-form כבר אין לנו, ng-submit נשאר, עכשיו במקום ng-form יש לנו משהו חדש שנקרא form-group, זה למעשה השיוך שאני עושה בין הרכיב html הזה לאובייקט הזה באנגולר, ככה אנגולר יודע על מה להתלבש, אז זה משוייך לזה, no-validation,
ng-submit, וגם פה אני רוצה עוד משהו שמעצבן אותי, שזה auto-complete-off, זה אומר שלא יצא לי את האופציות על המסך, אתם מכירים את זה שהוא מציע לנו אופציות על המסך עכשיו הוא לא אתם רואים הוא עושה שגיאה אבל מכירים את זה שהוא מציע אופציות על המסך אני לא רוצה שיוצא לי אופציות על המסך הנה הוא כבר לא מציע לי ואם אני אעשה auto-coupling
on הוא יתחיל להציע לי כל מיני אופציות פה למטה אני לא צריך את זה כי אני עושה בדיקות כרגע אוקיי אז אמרתי לו לא להציע לי אופציות ו-checkout עובד והכל בסדר הלאה פה NG מודל