Async Custom Validators
AbstractControl ומחזירה Observable של ValidationErrors או null. את החתימה מעתיקים מההגדרה של הטיפוס AsyncValidatorFn, בעזרת go to definition.emailNotTaken מקבלת מחרוזת ומסננת את הרשומות לפי האימייל. אם לא נמצא כלום מחזירים null, ואם נמצא מחזירים את אובייקט השגיאה.delay של שלוש שניות לפני הסינון. אפשר לבדוק את הזרם בכל שלב בעזרת do ו-console.log.providers של המודול.פרקי ההרצאה: Async Custom Validators
תמלול ההרצאה: Async Custom Validators
הטקסט המלא של הדקות הראשונות בהרצאה «Async Custom Validators» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
טוב חברים, אנחנו מוכנים להרצאה על ולידאטו אסינכרוני אנחנו רוצים שיהיה לנו בדיקה מול השרת האם האימייל שלנו כבר תפוס או לא למה זה אסינכרוני? כי אני לא רוצה לעכב את הבן אדם בעבודה השוטפת שלו שהטופס יעבוד וכשתגיע התשובה אז יתעדכן הטופס בהתאם אבל שהוא לא יתקע את העבודה השוטפת עד שהוא
מחכה לתשובה מהשרת כי זה יכול לקחת כמה שניות ויכול להיות שהשרת תקוע אז איך אנחנו עושים אסינכרוניק ולידאטו?
אז אנחנו רואים פה שאנחנו צריכים להעביר לו asynchronic validator function. השאלה איך אנחנו נבנה אותה, אז בואו נתחיל מזה שפשוט נלך לראות מה החתימה שלה ונבנה אותה.
אז קודם כל אני אקרא לה בשם כזה, email validator from server, וכאן השאלה זה מה היא צריכה לקבל, מה היא צריכה להחזיר, מה הולך להיות כאן.
אתם רואים, הוא כבר אומר לי שהיא צריכה לקבל משהו לא ברור, אני הולך על form control, לוחץ go to definition על form control הזה, ורואה שפורום קונטרול מקבל פורום סטייל שזה הדיפולט שלו פסיק ולידטור מסוג או ולידטור פאנקשן או נאל זה בעצם החלק השני והחלק השלישי זה אסינכרוניק ולידטור שהוא לא חובה זה אומר זה המשתנה הפנימי שלו ככה הוא קורה לו
בפנים שהוא לא רכיב חובה בגלל שיש פה סימן שאלה והוא מסוג אסינכרוניק פאנקשן או אוסף של אסינכרוניק פאנקשן או נאלס עד היום העברנו לו כל הזמן נאלים אה זה למעשה מה הוא מחזיר כן איזה סוג הוא בעצם יכול להיות או פאנקשן או זה.
עכשיו אני הולך לכאן ועושה F12 ורואה שאסינכרוניק פאנקשן צריך לקבל את הקונטרולר ולהחזיר פרומיס או אבזורבבל של ולידיישן ארורס.
אז זה מה שהוא צריך לקבל, יופי, והוא צריך להחזיר או פרומיס או נעל או אבזורבבל של ולידיישן ארורס. אני עובד עם אבזורבבל. למה? כי זה יום אחד תגיע התשובה של ולידיישן ארורס עם הודעות שגיאה ככה.
או Observable של Validation Errors או Null, הנה בוא נעשה לו Return Null רק כדי שלא אתריע לי סתם ויש לנו פה חתימה מוכנה מה שעשיתי עוד פעם כתבתי פה את הפונקציה שלי וזה השם שלה כאן איך ידעתי מה היא צריכה לקבל הלכתי ל-F12 כאן ראיתי מה הוא מקבל וראיתי פה הסינכרוניק
פאנקשן שזה בעצם הפרמטר השלישי הלכתי לסינכרוניק פאנקשן ופה ראיתי שהוא צריך לקבל Abstract Control ולהחזיר אחרי נקודתיים זה מה שהוא מחזיר אובזורבאבל של או ולידיישן אירורס או נעל פרומיס זה למעשה אובזורבאבל יותר פשוט יופי אז יש לנו ולידיישן אירורס אנחנו כבר מכירים זה למעשה הודעות השגיאה הרגילות שראינו זה ה-K והסטרינג למעשה
אנחנו מחזירים כמו שהחזרנו לפני כן ולידיישן אירורס רק עכשיו אנחנו מחזירים אותם באובזורבאבל זה כל ההבדל יופי אז בוא נעשה סרוויס שמתחבר לשרת ומעביר לי את האובזורבאבל של ולידיישן אירורס ואנחנו נפעיל את זה עם סרוויס אז את החלק הזה עשינו עכשיו אנחנו הולכים לצד של שרת ככה דבר ראשון אני רוצה לזייף לו תשובה מהשרת כדי לא להסתבך עם Web API ולא
להסתבך עם לעשות טבלה בדאטה בייס ואני לא רוצה עכשיו צד שרת לטפל בו אז אני עושה בעצם קובץ ג'ייסון שידמה לי תשובה מהשרת ג'ייסון פייר נקרא לו יוזרס איך לקבל תשובה באמת מהשרת אתם כבר יודעים אז אני לא אעשה את זה עוד פעם כי את זה כבר למדנו ועשינו כמו שצריך אז יש לי פה בעצם מערך ובתוך המערך כאילו יש לי אובייקטים אחד אחרי השני,
כל אובייקט יש לו מאפיין name ו-email, name ו-email, בסדר? זה כאילו השר"ט החזיר לי ג'ייסון כזה עם מאפיינים כאלו, זה יותר דומה אפילו ל-XMN. טוב, עכשיו אנחנו רוצים לבנות סרוויץ, אז אני אלך לסרוויץ ואני אעשה קובץ חדש, סרוויץ חדש בשם E-Mail ולידתור סרוויץ.
יופי, עשינו סרוויץ חדש, עכשיו אני עושה snippet, NG2 Services, נותן לו שם, ומה שאני רוצה ככה שהסרוויס הזה קודם כל יעשה HTTP, ישתמש ב-HTTP כאילו זה אמיתי ועושים אימפורט ואני עושה פה פונקציה של Emails Not Taken שיבדוק
את זה והפונקציה הזאת תקבל E-Mail to check, E-Mail לבדיקה מסוג סטרינג, סתם טקסט ותחזיר לי, מה היא תחזיר לי? את מה שאני רוצה לקבל פה, את Observables של Error on Null.
אז למעשה יש לי סרוויס שיחזיר לי תשובה ואני אחזיר אותו חזרה לכאן. זה כל הסיפור. למעשה אני מעביר את כל העבודה לסרוויס חיצוני שיתחבר לשרת ויוציא לי את האימייל הזה. למה אני עושה את זה עם סרוויס חיצוני? כי לך תדע באיזה קומפוננטות אני עוד ארצה את זה. בואו נעשה את זה בשלבים.
נעשה משתנה עזר Observable 1 שמה שהוא עושה הוא עושה this HTTP.get מתוך הקובץ שימו לב ה-HTTP.get מתוך הקובץ זה Observable הראשון מה עושה Observable השני הוא מקבל מה-Abservable הראשון לדוגמה delay שלוש שניות בוא נעשה את זה שלוש שניות תראו שזה עובד עכשיו אני יכול לעשות עוד פעם לד אובזרבאבל שלוש ולהגיד לו מאובזרבאבל השני
אחרי הדיליי תיקח מאפ ותעשה לו ג'ייסון חברה אנחנו כבר ראינו את זה נכון את כל זה ואני יכול גם לחבר אותם שהם לא יהיו אחד אחרי השני אלא פשוט לחבר אותם את זה הראתי לכם לקחת את זה ולחבר את זה זה אותו דבר מקווה שאתם כבר יודעים ולא מפחדים מזה יפה מאוד אז אחרי שלקחתי ג'ייסון עיכבתי אותו בשלוש שניות אחרי שלקחתי לו את הג'ייסון עכשיו אני רוצה לעשות
פילטר מה זה פילטר? אני עובר על כל הרשומות של ג'ייסון ועבור כל יוזר בודק האם אימייל שלו זה מה שאני מחפש.
אחרי שאני בדקתי וחזר לי החוצה רק את אלו שחיפשתי, רק את האימיילים הנכונים, אני בודק האם התשובה, בוא נעשה לזה תשובה, האורך שלה שווה 0. האורך של התשובה שווה 0, אז זה למעשה רשימת היוזרים.
האם רשימת היוזרים שווה ל-0? אם כן, זה הופך להיות לבוליאן, true או false. אז עכשיו יש לי true או false, ועכשיו אחרי שיש לי true או false, אני יכול להחזיר תשובה נקודה map אז אני אומר לו דבר כזה שיקח את התשובה הזאת שהיא true או false ואם היא true זה אומר שהוא 0 אז תחזיר לי null ואם הוא false אז תחזיר לי אובייקט אימייל
סטייקן וtrue יש אני מחזיר או null או אובייקט האובייקט הזה זה זה אני יכול לעשות לו אפילו קאסטינג אם אתם רוצים אז אני לוקח את האובייקט עושה לו קאסטינג בלידי שנערורס ומחזיר חזרה את הדבר הזה ונשאר לנו