Angular 4 ngModel - Validator Alerts
פרקי ההרצאה: Angular 4 ngModel - Validator Alerts
תמלול ההרצאה: Angular 4 ngModel - Validator Alerts
הטקסט המלא של הדקות הראשונות בהרצאה «Angular 4 ngModel - Validator Alerts» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם, בהרצאה הקודמת עשינו את הטופס הזה, הצבנו אותו עם בוטסטראפ, ועכשיו אנחנו רוצים לחבר עליו ולידטורים, לוודא שאם מישהו שוכח להכניס את השם, הוא יכתוב לו הודעה אדומה בסגנון דבר כזה.
נניח אני כותב פה AAA, אבל אז אני מוחק, כאילו שכחתי לכתוב, קופץ לי name as required. אם אני מתחיל לכתוב, ההודעה נעלמת. זה נקרא ולידטור שמוודא שיש, השדה הזה הוא חובה, ומילאו אותו, שאם הוא, לא מילאו אותו, קופץ פה איזשהו דיו אדום כזה.
אז בואו נעשה את הדבר הזה. כרגע השדה הזה הוא בכלל לא חובה, אז בואו נהפוך אותו להיות חובה, ושימו לב, לפני שאני מפעיל את הכלים של NG-Model, מבחינת העיצוב יש לי פה רק קלאס אחד של פורם קונטרול מבחינת העיצוב, שזה מה שעושה לו את המסגרת הכחולה הזאת של בוטסטראפ.
טוב, אז אנחנו רוצים שהרכיב הזה של input name יהיה חובה, לכן אנחנו מוסיפים לו פשוט מאוד מאפיין שנקרא Required, שזה חלק מ-HTML, אין לו איזשהו ערך, אין מה לכתוב לו שווה משהו, זה מאפיין שהוא חסר ערך.
אז אני עושה לו פשוט Required, שהוא מאפיין חובה, ואני ישר אגיד לכם שגם הכתובת זה מאפיין חובה. ואני רוצה לחבר אותו ל-NG מודל, ומתחתיו לעשות דיו של שגיאה.
זה אומר שאם הוא לא דיו של התראה, ואני רוצה גם להוסיף מתחתיו עוד דיב של התראה. בואו נעשה דיב, ונכתוב פה איזושהי התראה name is required וניתן לו קלאס אדום כזה.
נעשה לו קלאס alert ו-alert מכב danger אז אני רוצה ככה בואו נראה איך זה נראה הנה ככה זה נראה דיב אדום מה שנתן לו את הצבע האדום זה alert danger ואני רוצה רק שהrequired הזה לא ממולא אז בואו נתחיל לעשות את זה.
אז דבר ראשון אני רוצה לחבר את NG מודל אני גם חייב את ה-NG מודל הזה כדי לחבר אותו לנתונים האמיתיים שיש לי מה הנתונים האמיתיים שיש לי זוכרים מה אני שולח לשרת את ה-personal details.company name אז מה שקורה ש-NG מודל מחבר לי את זה לנתונים אמיתיים שהלקוח ממלא כי כרגע יש לי פה קלאס לדוגמה עם נתונים תחילתיים אבל אני רוצה להחליף
אותו אז זה מה ש-NG מודל עושה לי הוא בעצם מחבר אותי לנתונים האמיתיים אבל בנוסף לזה הוא גם מוסיף לי יכולות של ולידציה ולהוסיף לי קלאסים של ולידציה ואת זה אנחנו הולכים לראות תכף.
אז דבר ראשון חיברתי את זה ובואו נראה שזה באמת עובד לי אם אני אלך לכאן ונוסיף מוצר אחד ונקנה שלוש יחידות ממוצר אחד ושתי יחידות ממוצר שני ונרשום שזה יוני מלוס אנג'לס או ממוסקו ונעשה submit אנחנו רואים הזמנה 11-079 בואו נראה שזה באמת ההזמנה הזאת.
אורדר דיטלס סלקט אני רוצה לראות שהכמות נשמרה בוא נעשה פה וואר אורדר איידי שווה ל-11079 באמת אנחנו רואים שמוצר אחד שלוש יחידות מוצר שני שתי יחידות ובואו נראה שהכתובת שלי נשמרה כלקוח קסטמרס בטבלת הלקוחות אני רואה שבאמת יוני ממוסקו לקוח 47201 ומה שמחבר את הטבלה הזאת של לקוחות לטבלה הזאת של הזמנה 11000
זה טבלת אורדרס אנחנו יכולים לראות פה שבאמת הזמנה 11-079 מחוברת ללקוח 47201 שזה בעצם אני יוני ממוסקו יפה מאוד אז הדבר הזה עובד עכשיו נשאר לי זה מה ש-NG מודל עשה לי ה-NG מודל חיבר לי בעצם את הנתון הבפנוכו של הרכיב למה שיש לי בטייפ סקריפט למשתנים לעולם של אנגולר חוץ מזה חוץ מהחיבור הזה הוא גם הוסיף לי ה-NG מודל גם הוסיף לי פה קלאסים של NG וליד NG
ג'ו דיורטי ואנג'י טאצ'ט ואני רוצה עכשיו כאן להתחבר לקלאסים כאן אז בואו נעשה דבר כזה נעשה כזה דבר נעשה קודם כל משתנה שמכיל את האובייקט הזה של אנג'י מודל אנחנו רוצים לעשות משתנה חדש בתוך html אתם יודעים שאפשר לעשות משתנים בתוך html משתנים בתוך html נקראים local
template בתוך הטמפלט הלוקאלי משתנים variables משתנים בתוך הטמפלט הלוקאלי Local Template Variable וזה בעצם משתנה פה בתוך html אתם מבינים לא בטייפסקריפט בתוך html אני יכול לעשות משתנה עם סימן של סולמית ונקרא למשתנה הזה my client name variable סתם אני ממציא לו שם יכלתי לקרוא לו aaa והמשתנה הזה מה הוא יכיל בואו נעשה בואו נראה מה
הוא יכיל איך אני אדע מה הוא מכיל אני אעשה דבר כזה אני אלך לטייפסקריפט ואני אעשה פה איזושהי פונקציה שנקרא לה טסט הפונקציה הזאת מקבלת איזשהו משתנה AA וכל מה שעושה היא עושה דבאגר כדי שאני אחקור אותו אוקיי ואז אני אגיד לו כזה דבר שכשיש אירוע של Change תפעיל לי את הפונקציה טסט ותעביר אליה את המשתנה הזה ואז אנחנו נראה
מה יש לנו בתוך המשתנה הזה הבנתם אז הכרזתי על המשתנה ואמרתי כשיש אירוע של Change שמישהו מחליף משהו בתיבת טקסט תעשה לי טסט תפעיל לי פונקציה טסט תעביר את המשתנה הזה ושם אני עושה דבאגר ואני תופס אותו ונראה למה הוא שווה בדיוק ומה זה הדבר אז בוא נעשה a, הנה עבד הדבאגר ואנחנו רואים שa,a,a זה רכיב input עם id name id, זה רכיב
input שיש לו כל מיני קלאסים, כל הנקודות זה קלאסים, אז למעשה הוא העביר לי את רכיב ה input ואם אנחנו נלך עד הסוף שלו אנחנו נראה שזה html input element, למעשה הוא העביר לי את האובייקט שעומד מאחורי האינפוט הזה, האובייקט של הדבדפן, למעשה קיבלתי את האובייקט של הדבדפן, אני יכול לשחק עם האובייקט של הדבדפן,
לדוגמה יש לי פה value שלו ואני יכול לעשות כל מיני בדיקות לדוגמה משהו שקשור לוולידציה is valid אבל במקום לעבוד עם האובייקט הזה שהוא העביר לי של הדפדפן שזה פחות נוח אני רוצה לעבוד עם אובייקט יותר משוכלל ממנו של אנגולר עצמו למעשה אנגולר עשו אובייקט שעוטף את האובייקט הזה עוטף ומשכלל אותו לדוגמה אני רואה פה שזה required אתם רואים אז בואו נגיד למערכת במקום שהמשתנה הזה יהיה שווה לכל הרכיב הזה
אני אומר לו תקשיב תכניס לו בתוך הרכיב הזה יש גם NG מודל תצביע לי על NG מודל שלו ועכשיו אני אומר שהמשתנה הזה יצביע על אובייקט של NG מודל בוא נראה את זה אני עושה פה לקנות 1 עושה פה 444 עוזב אתם רואים ה-change עובד רק כשעוזבים את השדה ועכשיו ה-ayayayay הזה הוא כבר NG מודל תסתכלו למעלה פה זה כבר לא רכיב html המקורי של דבדפן אלא ה-NG מודל ופה
יש לי את השדות של דורטי האם מישהו שינה אותו האם הוא valid זאת אומרת שאני מקבל את כל היכולות שהמתכנתים של אנגולה הוסיפו לי יש לי את ה name יש לי את הנתונים שלו invalid pristine זה אומר שהוא טהור אף אחד לא נגע בו touch וכולי אז עם זה אני רוצה לעבוד אז ראינו שהמשתנה הזה קיבל עכשיו את ה-NG
מודל אני כבר לא צריך את הפונקציה הזאת יותר ועכשיו אני אומר דבר כזה שהדבר הזה יהיה hidden מורבה עם המשתנה שלי שימו לב עם הקומפוננט האחרת נקודה valid אם הקומפוננט הלמעלה ולידית אז האלרט הזה מוחבא, איזה יופי ואנחנו פעם ראשונה מקשרים בין שני הרכיבים על ידי לוקל טמפלייט וריאבל משתנה ברמת הטמפלייט לברמת ה html יפה מאוד בואו
נראה איך זה נראה עכשיו אם אני קונה משהו אתם רואים יש פה ערך אז לא רואים את ההתראה אם אני אמחק הכל אז כן רואים את ההתראה ואם אני אמלא התראה נעלמת ואם אני אמחק אין התראה אתם רואים אם הכל ריק יש התראה אם אין אז יש יפה מאוד ואנחנו ראינו איך זה עובד עכשיו אני רוצה רק לאפס את התוכן שלו פה שביידיפולט הוא יהיה ריק,
שלא ימלא לי כלום ביידיפולט כברירת מחדל, ואז אני רואה שהוא אוטומטית קופצת לי התרעה. אז אני רוצה להגיד לו, תקשיב, ההתרעה הזאת קופצת רק אם מישהו נגע בזה, לא צריך ישר להתריע לי. לא צריך להתריע לי מראש על הדבר הזה עוד לפני שהספקתי לכתוב משהו.
אז אני אומר לו כזה דבר, או שזה וייליד ואז תחביא את זה, או, שים לב, שהמשתנה הזה והוא פריסטין. פריסטין זה אומר ש... טהור, אף אחד לא שינה אותו.
אם אף אחד לא שינה אותו, פריסטין או אנטאצ'ט. פריסטין. בוא נעשה אנטאצ'ט. אנטאצ'ט. יותר טוב פריסטין. פריסטין זה אומר שאף אחד לא שינה אותו.
זה אומר שזה טהור. אז אני אומר לו, תקשיב, אם המשתנה הזה אף אחד לא נגע בו ואף אחד לא שינה אותו, רק אז תחביא. תחביא אותו. או שזה ולידי או שאף אחד לא שינה אותו.
בואו נראה, עכשיו ביי, אתם רואים אף אחד לא שינה אותו אז הוא בלי התראה, אם אני מתחיל לכתוב פה אני לא מקבל התראה סתם רק אם אני מתחכם והתחלתי לכתוב ואז מחקתי הכל רק אז מופיעה לי התראה, ראיתם איזה יופי? אם אני מתחיל לכתוב הנה היא נעלמת, אם אני מוחק היא מופיעה ואם אני טוען את הכל מההתחלה אין התראה סתם, עכשיו המטרה שלי הייתה בהרצאה הזאת להראות
לכם מה זה משתנה ב html שביי default אני משייך לו את הקומפוננטה הנוכחית ואני יכול גם לשייך לו ערך אחר או בייקט אחר מתוך html להשתמש בו גם בתוך הטייפ סקריפט שלי כשאני שולח אותו כפרמטר וגם בתוך רכיב אחר בוא נעשה את אותה קומבינה רק פה נוסיף מתחת לאדרס גם התראה נכתוב Addresses Required נעשה משתנה חדש סולמית My Client Address שווה NG Model ואז נגיד
לו My Client Address אם זה הוא ולידי אז תחביא ואם זה תחביא אף אחד לא נגע בו וזהו בואו נראה, אין התראה, אם אני כותב משהו אין התראה, ואם אני מוחק יש התראה, name is required ואדרס is required, שימו לב, ה-hidden הזה זה כמו ng if, זה אותו דבר, רק hidden הוא מחביא ו-ng if מוחק את זה מתוך הדום, כל זה מצוין, רק יש בעיה אחרת,
ששום דבר לא מונע ממני לשכוח לכתוב את האדרס, לכתוב לי איזשהו שם ולא להסכים לאישור, אפילו שיש לי התראה ולעשות submit ואני מקבל הזמנה תקינה, כאילו ההזמנה נשמרה בשרת וחזרה אליי, זאת אומרת אני רוצה שהכפתור של submit ייתן לי איזושהי דיקציה, איזושהי הודעה שיבדוק שהכל פה חוקי וולידי, אז איך
אנחנו נבדוק שהכל חוקי וולידי כשאנחנו לוחצים על כפתור של submit, אנחנו צריכים בתוך אירוע של צ'ק אאוט לבדוק את הכל, עכשיו השאלה זה איך באירוע של צ'ק אאוט נבדוק את כל הרכיבים שיש לנו פה, אז יש לנו פה כמה טריקים שאנחנו יכולים לעשות, אז בואו נתחיל מהטריק הכי פשוט, הרי הכל נמצא בתוך פורם, ויש לנו גם אובייקט של אנגולר לפורם הזה.
האובייקט של אנגולר שמיוצר אוטומט לפורם נקרא NG-FORM, ואני יכול לעשות כזה דבר, אני יכול לעשות צולמית, משתנה לוקאלי, לא יודע, נקרא לו MyFORM Variable, המשתנה הלוקאלי שלי של הפורם, MyFORM Variable, אבל שלא ישלח לי את הפורם של הרגיל, למרות שגם עם זה אפשר לעבוד, אני רוצה שישלח
לי את הפורם של אנגולר. ה-NG-FORM הזה זה למעשה רכיב של אנגולר, שעוטף את הפורום הרגיל. אני אספר לכם סוד, אפילו יכלתי לרשום פה NG-פורום במקום הפורום, וזה היה אותו דבר.
אז הוא ישייך את האובייקט של NG-פורום למשתנה הזה, ואז אני יכול להגיד לו, כשיש submit תשלח לי את המשתנה של NG-פורום, ואז כאן ב-checkout אני מקבל אותו, ואני מקבל אותו לא סתם, אני רוצה לקבל אותו עם טייפ שיהיה לי קל לעבוד איתו, NG-פורום.
NG-פורום הזה זה חלק מ-forms שצריך לייבא אותו, אתם רואים הוא כותב שצריך להביא אותו מתוך אנגולר פורמס ויש לי עכשיו את האובייקט הזה הנה עשיתי לו אימפורט ויש לי את האובייקט הזה ng-form הוא כאן ואני יכול להתחיל לעבוד איתו אז ככה אני מקבל גישה בעצם לכל הטופס בואו נעשה בדיקה קטנה ש-ng-form שבתוך הפורם האם מישהו שינה אותו זה רשימה של כל הפקדים שיש לו בפנים כל ה-controls אני רוצה לראות
האם הוא invalid אם הוא invalid אז מה אני רוצה לעשות אז קודם קודם כל אני רוצה לבטל את הפעולה ולעשות פה רטורן מהפונקציה אני לא נותן אני לא נותן לעשות אם הטופס הזה הוא invalid למה הוא invalid למה הטופס יהיה invalid כי כל הרכיבים שיש בפנים לא נדרשו כמו שצריך לא מולאו הצרכים