Reactive Form - Dynamic Validators
class="radio-inline", ושני הרדיו בטון מקבלים את אותו שם. השם המשותף הוא מה שמשייך אותם לקבוצה אחת, כך שבוחרים רק אחד מהם.setNotification עובר על מערך הטלפונים בלולאת for...of, על הערכים ולא על האינדקסים. אם נבחר טלפון, מוסיפים לכל קונטרול Validators.required באמצעות setValidators. אם נבחר אימייל, מורידים את הוולידטורים באמצעות clearValidators.updateValueAndValidity, כדי שהבדיקה תרוץ שוב על השדות.setValidators על כל קונטרול בנפרד, לא רק על מערך.valueChanges של הקונטרול בקלאס, ומפעילים את הפונקציה עם הערך שנבחר. כך התבנית נשארת נקייה, והכל נשלט מהקוד.פרקי ההרצאה: Reactive Form - Dynamic Validators
תמלול ההרצאה: Reactive Form - Dynamic Validators
הטקסט המלא של הדקות הראשונות בהרצאה «Reactive Form - Dynamic Validators» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם בהרצאה הזאת אני רוצה ללמד אתכם איך להוריד ולהוסיף ולידטורים בצורה דינמית נניח אני רוצה לבחור איך הלקוח מקבל התראות או אימייל או טלפון או סמס אם הוא מקבל בסמס אז אני רוצה ולידטור required שזה שדה חובה הטלפון ואם הוא מקבל באימייל אני לא רוצה שזה יהיה שדה חובה שהדבר הזה יימחק מפה השאלה זה איך לעשות מחיקה אוטומטית של ולידטורים
מרכיב אז אנחנו נעשה דבר כזה, נעשה קודם כל משהו שהוא יוכל לבחור validation type form controller וזה יהיה בעצם new form controller רכיב רגיל, יופי עשינו רכיב שהוא בוחר רדיו בטון האם הוא רוצה את זה או את זה אנחנו רוצים לעשות פונקציה אחרי שהוא יבחר זה יהיה רדיו בטון שהוא בוחר מה הוא רוצה אנחנו רוצים
להריץ פונקציה set נוטיפיקיישן נוטיפיי ביי וכאן אנחנו בעצם נקבע איך הנוטיפיקיישן עובד אם הוא עובד דרך טלפון אז אנחנו רוצים להוסיף לכולם required אם הוא עובד דרך אימייל אנחנו רוצים להוריד לכולם את ה-required אז יהיה לי פה רדיו בטון זה יהיה רדיו בטון וכשלוחצים על הרדיו בטון אז
הוא מפעיל את הפונקציה הזאת והפונקציה הזאת עוברת על המערך ומוסיפה לזה required או מורידה לזה ל-required איך לעבור על המערך קודם כל נגנוב את המשתנה המקומי.
ככה קיבלנו גישה לכל ה-array, ועכשיו אנחנו צריכים פה בפנים לרוץ על כל ה-array, for in, ככה. קודם כל אני לא רוצה את זה in, אני רוצה את זה off.
in רץ על הערכים 0, 1, 2, ו-off רץ על ה-values, לא על האינדקסים. נעשה את זה טלפון קונטרול, זה למעשה כמו שעשינו פה.
שזוכרים כאן, רצנו על כל המערך של הטלפונים בלולאה? אותו דבר אני עושה, אני רץ על כל הטלפונים, כל הרכיבים של הטלפון בלולאה כמו שעשינו את זה בשכפולה עכשיו אני רץ עוד פעם על כל ה-aray הזה נקודה controls אני רץ עליו ומה אני עושה עבור כל טלפון אם זה טלפון אני עושה לו set validator set
validators ומוסיף לו validator required זאת אומרת שאם בחרת התראות דרך טלפון או דרך sms אז מספר טלפון שלך הוא required אני רץ על כל המערך של ה-aray ומוסיף לכולם validator required זה הכל דבר היחיד שאני צריך לעשות עוד משהו בגלל שהוספתי לו ולידטור אני צריך להריץ פונקציה שתעשה update על כל הוולידטורים שקשורים כי
הוספתי לו ולידטור חדש אז ברגע שאני מוסיף ולידטור חדש אני רוצה שיעשה לי בדיקה חוזרת אותו דבר כאן אני אעשה אותו דבר כאן אני ארוץ על כל הרכיבים רק במקום set ולידטורס אני עושה פה clear ולידטורס אז בן אדם בוחר איך הוא רוצה את זה ודיפולט ניתן לו טלפון בן אדם בוחר איך הוא רוצה את הוולידציה.
אם הוא בוחר טלפון, אני רץ על כל המערך של טלפונים ומכניס לכולם Required. עכשיו שימו לב, אני יכול לעשות את ה-Set ולידטור על כל רכיב בנפרד.
יכלתי גם לקחת רכיב סתם Address Form Control ולעשות לו Required. זאת אומרת, ה-Set ולידטורס עובד על כל אחד שהוא פורם קונטרול, אוקיי? בגלל שזה פורם קונטרול, אז זה עובד לנו.
אתם כבר לא מפחדים? מרצים על כל המערך של הטלפונים ומשיכים להם ערך או מורידים להם ולידטור. ככה אנחנו מוסיפים ומורידים ולידטורים דינמית.
עכשיו נשאר לנו רק לעשות רדיו בטון שמעביר לשם ערך. בואו נלך ונעשה לנו רדיו בטון. נעשה את זה מתחת לכפתור, נפתח פה דיו חדש. בואו נעשה שכפול כי זה אותו דבר חיצוני.
נוסיף פה Label Notification By ועכשיו אנחנו צריכים בעצם להוסיף רדיו בטון. בואו אני אראה לכם איך מוסיפים את זה, עושים עוד לייבל, רדיו אינליין, זה אומר שהם יהיו בשורה אחד אחרי השני, זה קלאס של בוטסטראפ של עיצוב, אז זה העיצוב שלו, קלאס, ובתוך הלייבל הזאת, שזה
מה שכתוב בתוך הטלפון, לפני הטלפון כתוב פה הרדיו בטון צ'ק, והוא משוייך ל-Ctrl Name, שימו לב, זה, זה, זה, אוקיי? וכתוב פה Value טלפון, והדיפולט שלו זה צ'קט.
והשני, אותו דבר, זה השני גם כן רדיו אינליין גם השם שלו זה אותו שם שימו לב זה אותו שם בכוונה כי רדיו באטן אני בוחר את זה או את זה טלפון ואימייל וזה צ'ק טרו ושם לא צריך להיות צ'ק טרו אז פה אפשר לא לשים פה טלפון שמתי את זה שם ערר ברירת מרדק אז יופי אז יש לי טלפון אימייל וזה משוייך לאותו רכיב למה כי ככה בעצם עושים html נותנים להם אותו שיוך ואז זה או זה יפה
מאוד בוא נבדוק שזה עובד רק שאלה איך נפעיל את הפונקציה, אז כדי להפעיל את הפונקציה אנחנו יכולים לעשות פה on click