Reactive Form - Custom Validators

תמלול ההרצאה: Reactive Form - Custom Validators

הטקסט המלא של הדקות הראשונות בהרצאה «Reactive Form - Custom Validators» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   שלום לכולם, ברוכים הבאים להרצאה על Custom Validators אנחנו נעשה ולידטור משלנו שיבדוק לנו את השדה של אימייל ראשון ואימייל שני ויבדוק האם הם אותו דבר או לא נלמד איך לעשות ולידטורים משלנו ולהצמיד אותם בעצם לקבוצה של רכיבים זאת הולכת להיות הרצאה מאוד מעניינת דבר ראשון בואו נעשה את הקבוצה הזאת שבתוכה

2. 00:22

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

3. 00:26

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

4. 01:07

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

5. 01:24

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

6. 01:35

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

7. 01:45

   איך אני יכול לדעת מה היא צריכה לקבל, מה היא צריכה להחזיר? ויש לי פה הודעת שגיאה שהפונקציה לא מחזירה ולא מקבלת את מה שצריך ואני לא יודע מה לשים לו אבל למזלי יש להם פונקציה מוכנה שאני יכול להסתכל מה הם עשו איך הם בנו אותה ולעשות בדיוק אותו דבר אז בואו נלחץ F12 על ה-required validator ונראה שהפונקציה שלהם שנקראת required מקבלת

8. 02:07

   abstract control ומחזירה או null או validators error תכף נראה מה זה validation errors אבל זה מה שאני צריך לבנות בעצמי ואל תדאגו תכף נבנה את זה שימו לב פונקציה יכולה להחזיר או את זה או את זה ו-validation errors זה למעשה key מפתח שזה טקסט ואני אספר לכם סוד זה המפתח שנכנס לרשימת השגיאות שמה או null null שזה אומר

9. 02:29

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

10. 02:49

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

11. 03:07

    הסוגריים של הקונטרולר בגלל זה זה abstract control כי זה יכול להיות גם קבוצה וגם form control וגם array שהוולידטור יהיה אוניברסלי אז אנחנו לוקחים מתוך הקונטרולר שלנו את הילד שלו, את הרכיב בן שלו, שזה למעשה אימייל 1 ואימייל 2, לוקחים את הווליוס שלהם,

12. 03:26

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

13. 03:43

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

14. 03:55

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

15. 04:07

    עכשיו אחרי שלקחתי שני ה-values, את שני הערכים, כי כבר שינו את שני השדות, אני יכול לבדוק האם הם match, האם הם תואמים.

16. 04:14

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

17. 04:28

    עכשיו כשיש לי true זה אומר שהם תואמים, אני צריך להחזיר null, שימו לב. למה? כי זה אומר שאין שגיאה, אותו דבר אני צריך להחזיר validation error שראינו שזה אובייקט בוא נראה עוד פעם נלחץ f12 או כפתור ימני וgo to definition ונלך לראות ממה זה מורכב ואנחנו רואים שהוא מורכב מ-key ואיזשהו ערך עכשיו הערך הזה חסר משמעות מבחינתי מה שחשוב לי זה ה-key כי הוא נכנס

18. 04:55

    לאוסף של errors של השגיאות של הרכיב אנחנו תכף נראה שאנחנו מייצרים לעצמנו למעשה error משלנו הודעות שגיאה משלנו אני ממציא לזה איזה שם שבא לי emails not equal שהם לא שווים ונותן פה איזשהו ערך שהוא חסר משמעות מבחינתי, סתם אני מחזיר טור.

19. 05:12

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

20. 05:23

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

21. 05:45

    עכשיו אנחנו עוברים ל-HTML הולכים לעשות לזה בעצם את החיצוניות של כל הלוגיקה שלנו אני לוקח את האדרס, את הרכיב של הכתובת ומשכפל אותו פעמיים על המסך לאימייל הראשון ולאימייל השני הנה אנחנו מכניסים פעמיים את האדרס הזה ועוד מעט נחליף אותו ל-E-Mail אבל צריך לעטוף את הכל ב-D1 גדול של הקבוצה ואני גונב את ה- Forum Group מכאן רק השם שלה זה זה יפה

22. 05:59

    מאוד אז יש לנו בעצם Forum Group שעוטף את שני הרכיבים ועכשיו צריך להיות בזהירות רבה אחרי קופי פייס להסתכל טוב טוב איפה להכניס את ה-E-Mail הראשון וזה לא כזה פשוט צריך להסתכל טוב טוב איך עושים את זה קודם כל אני מכניס Control Name