PracticU

Custom Validators With Parameter

בלי כתוביותעם כתוביות
PracticU › קורס אנגולר 4 עם Angular - WebAPI › Custom Validators With Parameter
מילון מושגים:
פרמטר - ערך שמועבר לפונקציה או לפקודה כקלט, ומשפיע על אופן פעולתן ועל התוצאה שהן מחזירות.
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
Angular - מסגרת פיתוח של גוגל לבניית יישומי אינטרנט מתקדמים בצד הלקוח, מבוססת TypeScript ורכיבים.
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.
תבנית - מבנה בסיסי מוכן שממנו יוצרים פריטים דומים, כמו תבנית עמוד או תבנית מסמך.
דיבאג - תהליך של איתור, הבנה ותיקון תקלות בקוד, לעיתים בעזרת כלי שמאפשר לעצור ולעקוב אחר ריצת התוכנית.
אסינכרוני - אופן פעולה שבו פעולה ארוכה רצה ברקע והתוכנית ממשיכה בלי להמתין לה, ומטופלת כשתסתיים.

Custom Validators With Parameter
בהרצאה הזאת משכללים ולידטור משלנו, כך שיקבל פרמטר מבחוץ. במקום לבדוק שם אחד קבוע, הוולידטור יקבל את השם האסור ויחסום אותו בכל שדה שמשתמשים בו.
השלבים העיקריים
1. ולידטור רגיל קודם: בודקים את השם בוב. בונים אובייקט RegExp מהשם האסור, ובודקים באמצעות test האם הערך שהמשתמש הזין מכיל אותו.
2. החזרת שגיאה עם הערך: אם יש התאמה, מחזירים אובייקט עם המפתח forbiddenName ועם הערך שהמשתמש הזין. אם אין התאמה, מחזירים null.
3. הפיכה לפרמטר: כדי לקבל את השם האסור מבחוץ, עוטפים את הפונקציה בפונקציה חיצונית שמקבלת את השם. הפונקציה החיצונית מחזירה את הוולידטור הפנימי.
4. למה זה עובד: Angular קורא לפונקציה החיצונית פעם אחת, בזמן האתחול, עם הפרמטר, והיא מחזירה את הפונקציה הפנימית. בכל בדיקה Angular קורא רק לפונקציה הפנימית. זו שיטה שנקראת factory, ובה כל מופע של הוולידטור שומר ערך פנימי משלו, כך שכל שדה יכול לקבל שם אסור אחר.
5. הודעה ב-HTML: ההודעה נכנסת לאוסף השגיאות של הקונטרול, והתבנית מציגה אותה כשהשדה לא תקין.
שימו לב
- בדיבאג אפשר לראות את אובייקט השגיאה ולקרוא ממנו את הערך שנשלח.
בסיום יש ולידטור גמיש שמקבל פרמטרים ויכול לשמש עם שמות אסורים שונים. בהרצאה הבאה נבנה ולידטור אסינכרוני שמבקש מהשרת לבדוק אם האימייל תפוס.
השיעור הבא בקורס: Async Custom Validators

פרקי ההרצאה: Custom Validators With Parameter

  1. 00:00

    ולידטור חוסם שם בוב

  2. 00:58

    שימוש בחתימת הוולידטור של Angular

  3. 02:44

    הצגת הודעת השגיאה לשם אסור

  4. 03:19

    בדיקת תקלה בוולידטור בעזרת דיבאגר

  5. 04:33

    העברת פרמטר לוולידטור מותאם

תמלול ההרצאה: Custom Validators With Parameter

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

  1. 00:02

    שלום לכולם, בהרצאה הזאת אנחנו הולכים להסתבך עם custom validators וראינו איך לעשות ולידטור משלנו אנחנו עכשיו רוצים לשכלל אותו ולהעביר לו בסוגריים מידע נוסף מה זאת אומרת?

  2. 00:14

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

  3. 00:33

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

  4. 00:59

    כמו שעשינו לפני כן, בדיוק עם אותה חתימה שאנחנו גונבים אותה בעצם מ-required. אני בא ל-required, עושה go to definition.

  5. 01:08

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

  6. 01:22

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

  7. 01:48

    control.value מכיל אותו ואז יש לי תשובה וב-return אני בודק אם התשובה הזאת true זה אומר שהוא מכיל משהו שאסור אז אני אחזיר חזרה מילה forbidden name שם אסור מידע נוסף זה ctrl.value ctrl.value זה למעשה המידע הנוסף שהגיע לי מהקונטרולר זה למעשה הuser input בוא נעשה פה עוד משתנה עזר ונקרא לו user input זאת אומרת אתם מבינים שזה הערך שהגיע לי מהמשתנה אני אעשה לכם let user

  8. 02:17

    input שווה ל ctrl.value ואני בודק האם user input הוא חלק מזה ואם כן אני מחזיר לו את האוסף forbidden name והuser input אם הוא false זה אומר שהוא לא קיים שמה אז אני אחזיר נ"ל כי אין הודעות שגיאה ככה אני עושה ולידטור רגיל של שם בוב שהוא לא מופיע לי בתוך הרשימת השמות אוקיי בואו נבדוק שזה עובד וגם לפני כן אני רוצה להראות לכם את

  9. 02:44

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

  10. 03:06

    לא רק בוב אלא כל שם שאנחנו נרצה ואיך להעביר פרמטרים וזה מוחקב זה לא פשוט בכלל אז אני בא לכאן עושה ctrl f5 קונה איזושהי גבינה וכותב בשם מה שהוא מוחק name as required כותב שלוש אותיות number as required הכל עובד תקין כותב פה בוב צריכה להיות הודעת שגיאה לא עובד לי

  11. 03:26

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

  12. 03:42

    בואו נכניס פה בוב, או יש פה עוד B ומה התוצאה? פולס, יופי, בואו, מעניין אותי מה קורה כשיש בוב, יש פה בוב והתוצאה היא עדיין פולס, או זאת הבעיה שלי, בואו נלך לבדוק אותה, איך בודקים אותה?

  13. 03:55

    אני לוקח את הדבר הזה לקונסול שימו לב אני באמצע זה false ואם הייתי מעביר לו ככה בוב אני יודע מה הבעיה אני יודע מה הבעיה אולי צריך פה בלי גרשיים לעשות ככה בואו נראה ואני אכתוב פה בוב כאשר אדביק את זה בואו נראה מה קורה עכשיו user input bob וזה true זה היה צריך להיות פשוט בלי גרשיים וכשזה true bob name is forbidden חברים זה עובד שימו לב השם של בוב אסור טוב שום דבר חדש פה חוץ

  14. 04:24

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

  15. 04:47

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

  16. 05:08

    פאנקשן אז איך אנחנו מקבלים אנחנו חייבים לקבל את זה או יש פה טריק שימו לב הפונקציה

לקורס המלא: קורס אנגולר 4 אונליין עם WebAPI

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

ההרצאה הבאה: Async Custom Validators

הרצאות קשורות מקורסים אחרים

  • Custom Toast
  • הסבר על Custom Dialogs
  • בניית Custom React Hook
  • יצירת מאפיין וולידציה - Custom Validator

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס ריאקט - React