Reactive Form - Duplicate items
FormArray, עם כפתור שמוסיף שדה חדש בכל לחיצה.FormControl בודד מגדירים FormArray, ובתוכו מערך של קונטרולים. כל איבר במערך הוא טלפון אחד, והמערך יכול להחזיק שניים, שלושה או ארבעה שדות.type="button" (ולא submit) מפעיל פונקציה שדוחפת קונטרול חדש למערך באמצעות push. בתוך הפונקציה מגדירים משתנה עזר מסוג FormArray, כדי שהאינטליסנס יכיר את השמות. הקונטרול החדש נוצר בלי ערך ברירת מחדל.*ngFor על הקונטרולים של המערך, ומשתמשים באינדקס i. כל שדה מקבל שם ו-id לפי האינדקס, כך שאין כפילויות גם אחרי הוספה.for של התווית אין property זמין, לכן כותבים אותו באמצעות [attr.for]. זה הטריק כשתכונה לא עובדת עם סוגריים מרובעים רגילים.FormArray Angular מחזיר הודעת שגיאה על הקונטרולים שבתוך המערך.פרקי ההרצאה: Reactive Form - Duplicate items
תמלול ההרצאה: Reactive Form - Duplicate items
הטקסט המלא של הדקות הראשונות בהרצאה «Reactive Form - Duplicate items» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום לכולם בהרצאה הזאת אנחנו רוצים להוסיף שדה של טלפון אבל לא סתם שדה שאפשר יהיה להוסיף כמה טלפונים שהלקוח ירצה שיהיה לו כפתור להוסיף טלפון והוא ילחץ עליו ויוסיף עוד טלפון זאת אומרת אני הולך לכאן ל html ואיפה שיש לי כפתור של סאבמיט אני משכפל אותו ואני עושה לו add טלפון רק אני עושה לו
type button ולא סאבמיט ואני עושה לו add טלפון, add another telephone number ויהיה לו בטון פריימרי.
וזה מה שאני רוצה לעשות, שיהיה לי בטון פריימרי וכשלוחצים עליו הוא יפעיל פונקציה add telephone. יופי, אז בואו נעשה את זה.
איך אנחנו נעשה רכיב כאן שיוסיף לי רכיבים במסך וגם מבחינה לוגית, איך אנחנו עושים את זה, ואת הטלפון הזה אנחנו נוסיף אותו עוד מעט כאן, בינתיים הוא יהיה ריק, השאלה זה מה לעשות פה.
אז בואו נתחיל מזה שאנחנו נבנה באנגולר את המבנה הלוגי ואז נצמיד אותו ל-HTML שעוד לא בנינו לטלפון. אז נתחיל מכאן, אז מה אני מוסיף? אני מוסיף פה לא רכיב רגיל כמו שעד עכשיו ראינו אלא רכיב שנקרא array מערך שבפנים יש רכיבים.
זאת אומרת לא form control אחד אלא form array מערך של ובתוך המערך אני נותן לו בפנים בסוגריים שלו, תסתכלו, מערך של טלפונים וזה למעשה יהיה כמו פורום קונטרול רק הפעם הוא נכנס לנו לתוך מערך ואז בפנים בתוך המערך אני נותן מערך של קונטרולרים, אתם רואים?
מה זה אומר אבסטרק קונטרול? שזה יכול להיות גם פורום קונטרול וגם גרופ קונטרול, אני יכול להכניס בתוך המערך הזה גם גרופ וגם פורום קונטרול, אני מכניס פורום קונטרול, זה למעשה טלפון אחד, אם אני ארצה עוד טלפון יהיה לי פה עוד טלפון ואז אז יהיה פה טלפון שלך זה לדוגמה 123 ופה יהיה
טלפון 333. זה למעשה שני טלפונים אם לקוח ירצה להוסיף עוד טלפון אין בעיה הוא מוסיף למערך עוד טלפון עכשיו למה לא אכפת לי שיהיה לו גם שלושה וארבעה טלפונים כי אני רץ על האיברים במערך 012 אז אנחנו נעשה כרגע שני טלפונים ועכשיו נעשה כפתור שהוא מוסיף לנו עוד טלפון לכאן איך אנחנו נעשה כפתור שמוסיף לנו עוד טלפון נעשה פה משתנה עזר נקרא לו
פורם ריי ולמעשה נעשה פוש לשם מה זה פורם ריי אנחנו לוקחים את הצ'ק אאוט הזה נקודה עכשיו האינטלסנס פה הוא לא רואה את השמות שכתבתי אז הוא יעשה לי הודעת שגיאה אפשר לעשות קונטרולס נקודה ואז אפשר להכניס את זה ככה זאת שיטה אחת נכון כמו שעשינו כאן גם אפשר לעשות כאן אבל אפשר גם לעשות בשיטה אחרת שזה נקודה גט ובסוגריים להעביר לו אותו כסטרינג זה אותו
דבר גם זה וגם גם זה יחזיר לי בסוף את האובייקט הזה, פורמר ריי. אחרי שהוא מחזיר לי את הפורמר ריי, בואו נעשה לו רק טייפ, שיהיה לנו טייפ מוגדר היטב, וגם פה נעשה לו טייפינג.
דרך אגב, אם לא הייתי עושה לו פה טייפ, הוא היה נותן לי הודעת שגיאה, שאתם רואים, הוא נותן לי הודעת שגיאה, ואני צריך לעשות לו קאסטינג. למעשה, אני אומר לו, קח את כל הדבר הזה ותחליף לו סוג לפורמר ריי.
עכשיו, כשיש לי פורמר ריי, יש לי אינטליסנס, ובאינטליסנס אני יכול לעשות לו כל מיני דברים, לדוגמה נקודה פוש ולתת לו עוד טלפון, בואו ניתן לו עוד טלפון רק שיהיה רג בפנים בלי דיפולט וליו, זהו.
אז פונקציה add טלפון כל מה שהיא עושה היא לוקחת את הפורמר ריי ועושה פוש לעוד איבר לעוד איבר לעוד איבר במערך, אז יש לי פה ברירת מחדל שני איברים במערך אז יהיו לי עוד איברים במערך, אני לא צריך ערך ברירת מחדל אז אני מוותר עליו אז יש לי פה מערך של רכיבים, כל מה שנשאר לי לעשות זה להציג את המערך הזה במסך ב-HTML.
אז בואו נלך ל-HTML, ואני רוצה אותו מתחת לאדרס. זה אדרס, והנה פה נכניס אותו. אז אני פותח פה בעצם דיו, שהדיו הזה הוא יהיה משוייך לפורום array.
ככה אני אומר לו, כמו שעשינו פורום גרופ, נכון שעשינו עד עכשיו פורום גרופ, עכשיו אנחנו עושים לו פורום array name, ומה השם שהבאנו לו? זה זה, יופי. ובפנים אנחנו נעשה בעצם את הקוד הרגיל שלנו, נניח כמו שאנחנו משכפלים אדרס יופי זה כאילו אדרס רק עוד מעט נחליף את זה ואני רוצה את זה לשכפל עם NG4 ולרוץ על הלולאה נקרא לזה טלפון אייטם שהוא לוקח את זה מתוך הקונטרולס האלו זאת אומרת הוא רץ
על כל המערך הזה עכשיו אני מוסיף לכם משהו חדש שלא ראיתם עד עכשיו אני צריך את ה-I של האינדקס את ה-012 אני צריך את המספר הזה אז אני מכריז על משתנה לוקאלי I שהוא יהיה שווה לאינדקס אינדק זה משהו שאנגולר יעביר לי, 012, ויהיה פה ב-012 בפנים.
יופי, אז אני משכפל את הדיו הזה בעצם עבור כל טלפון. ככה אני רץ על המערך.