PracticU

Reactive Forms - Error Messages

בלי כתוביותעם כתוביות
PracticU › קורס אנגולר 4 עם Angular - WebAPI › Reactive Forms - Error Messages
מילון מושגים:
טופס - אזור בממשק שבו המשתמש מזין נתונים בשדות ושולח אותם, למשל טופס הרשמה או התחברות.
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.
משתנה - שם שמפנה למקום בזיכרון שבו נשמר ערך שיכול להשתנות במהלך ריצת התוכנית, כמו מספר, טקסט או אובייקט.
אובייקט - יחידה בתכנות מונחה עצמים שמאגדת נתונים (תכונות) ופעולות (מתודות). נוצר בדרך כלל ממחלקה המשמשת כתבנית.
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
תנאי - ביטוי לוגי בקוד שתוצאתו אמת או שקר, וקובע אילו פקודות יתבצעו בהתאם לערכו.
לולאה - מבנה בקרה שחוזר על קטע קוד שוב ושוב כל עוד תנאי מתקיים או עבור כל פריט באוסף.
תבנית - מבנה בסיסי מוכן שממנו יוצרים פריטים דומים, כמו תבנית עמוד או תבנית מסמך.

Reactive Forms - Error Messages
הודעות השגיאה של הטופס אפשר להעביר מה-HTML אל הקוד, כך שתהיה שליטה מלאה עליהן, ואפשר יהיה לטעון אותן מהשרת ובשפות שונות. בהרצאה הזאת מעבירים את הלוגיקה של ההודעות לקלאס.
השלבים העיקריים
1. משתנה ואובייקט הודעות: מגדירים משתנה עזר, nameErrorMessage, ממנו יוצגו ההודעות על המסך, ואובייקט errorMessages שבו המפתח הוא סוג השגיאה והערך הוא הטקסט. כרגע יש רק את forbiddenName, ובהמשך האובייקט יגיע מהשרת.
2. האזנה לשינויים: נרשמים ל-valueChanges של הקונטרול name, כמו בהרצאה על ולידציה דינמית. בכל שינוי נקראת הפונקציה setMessages עם הערך ועם הקונטרול עצמו, כי צריך לבדוק את מצבו ולא רק את הערך.
3. תנאי להצגה: ההודעה נקבעת רק כשהשדה לא תקין וגם שינו אותו, או כשנשלחה בקשה להציג את כל ההודעות.
4. לולאה על השגיאות: עוברים על form.errors באמצעות for...of, ומוסיפים הודעה לכל שגיאה לפי המפתח שלה. לשגיאה forbiddenName מוסיפים גם את הערך הנוכחי של השדה, כדי להציג את השם האסור שהמשתמש הזין.
5. התבנית: ב-HTML נשאר רק *ngIf שמציג את ההודעה אם היא קיימת.
שימו לב
- המפתח באובייקט ההודעות חייב להתאים בדיוק לשם השגיאה שמוחזרת מהוולידטור.
- ההודעה מצטברת, ולכן בתחילת הפונקציה מאפסים את ההודעה הקודמת כדי שלא תישאר שגיאה ישנה.
כך כל הטיפול בשגיאות נמצא בקוד ולא בתבנית, וניתן לבדוק אותו בדיבאגר שורה אחרי שורה.

פרקי ההרצאה: Reactive Forms - Error Messages

  1. 00:00

    העברת הודעות שגיאה מ-HTML לקוד

  2. 01:38

    הפונקציה setMessages ומעקב אחרי שינויי הערך

  3. 03:09

    העברת הקונטרול לפונקציה כפרמטר

  4. 03:42

    הצגת שגיאה רק לשדה ששונה ולא תקין

תמלול ההרצאה: Reactive Forms - Error Messages

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

  1. 00:02

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

  2. 00:18

    רוצה שאת הלוגיקה של הודעות שגיאה להעביר לתוך הקלאס. אז כדי לעשות את זה בואו נעשה איזשהו משתנה עזר. נקרא לו name name arrow message שיהיה איזשהו סטרינג וכאן נכנסו הודעות השגיאה שצריך להציג חוץ מזה גם נעשה משהו שלרוב יגיע מהשרת name error messages כאילו הודעות name error messages

  3. 00:43

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

  4. 01:06

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

  5. 01:20

    גם את הלוגיקה הזאת אני ארצה להעביר לשמה, אז גם אותה אני אעביר לשם, לתוך ה-Class שלי. אז כאן אני אעשה רק NGif שיבדוק האם הדבר הזה בכלל קיים, ואם הוא קיים הוא יציג אותו.

  6. 01:33

    זה הכל שימו לב איך הורדתי את כל הטיפול בהודעות שגיאה מ html העברתי הכל לקלאס יפה מאוד עכשיו נשאר לי רק לעשות פונקציה שבוא נעשה אותה פה למטה מתחת ל-NG on init פה למטה נקרא לפונקציה הזאת set messages והיא זאת שבעצם תכניס לתוך משתנה

  7. 01:52

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

  8. 02:07

    כמו שעשינו לפני כן, זוכרים פה? Value Changes, עקבנו אחרי Value Changes ועשינו עליהם Subscribe. אז אנחנו עושים אותו דבר, רק הפעם הקונטרולר שלנו יהיה על ה-Name, רק על השם, אנחנו כרגע מטפלים בו.

  9. 02:20

    אז אני עושה לו צ'ק אאוט, גט שם, Value Subscribe, Value Changes, כאילו על כל השינויים שקורים לרכיב הזה, תעשה סאבסקרייב, כל פעם שמגיע לך ערך עם שינוי, תפעיל לי את הפונקציה setMessages ותעביר אליה את ה-selected value, אז קודם כל אני רוצה פה את ה-selected

  10. 02:36

    value, נעביר לפונקציה את הפרמטר SelectedValues מסוג סטרינג, ונעביר אליה גם את הרכיב עצמו, את הקונטרולר, כי אני צריך לבדוק כל מיני תכונות שלו, אז אני צריך למעשה את הקונטרולר עצמו, אז נקרא לזה formControl וזה יהיה abstractControl,

  11. 02:54

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

  12. 03:08

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

  13. 03:17

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

  14. 03:27

    זה שתי האופציות שיש לי, בואו אני אראה לכם את שניהם. או ככה או ככה. עכשיו הייתי עושה את האופציה הזאת אם הייתי מוציא את ה-setMessages לאיזשהו סרוויס חיצוני.

  15. 03:37

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

  16. 03:51

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

  17. 03:52

    למקרה שיש שם איזושהי הודעה קודמת לבדוק האם from control dirty אם אף אחד לא שינה אותו או או שעוד לא הייתה הוראה להציג את כל ההודעות השגיאה, אני רוצה להציג הודעות שגיאה רק אם הייתה הוראה להציג את כל ההודעות השגיאה, או שמישהו שינה אותו, וגם הוא לא תקין.

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

ההרצאה הקודמת: Async Custom Validators

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

  • Improper Error Handling
  • Error Handling - טיפול בשגיאות
  • grep /var/log/messages
  • טופס בריאקט - React Forms

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

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