לפעמים יש לנו מצב של טופס שפרוס על פני כמה עמודים, צעדים של מילוי טופס. אנחנו רוצים את אותו הטופס לאורך כל התהליך. אפשר לעשות את זה עם form control. הגדרת הטופס הראשי בעמוד הראשי שמכיל את הניווט לשאר העמודים ואת ה-router-outlet נגדיר את הטופס. קובץ span-form.component.ts קובץ span-form.component.html התבנית של העמוד מחזיקה את כפתורי […]

נגדיר טופס שבתוכו יהיו הפקדים שבהמשך. בטופס יש שימוש ב-form builder. ליד כל שם פקד יש את סוג הפקד שנשתמש בו בטופס. zimun-torim.component.ts המבנה הבסיסי של דף הטופס הוא כזה: zimun-torim.component.html תיבת טקסט – Input הפקד הכי פשוט הוא תיבת טקסט. נוסיף את הפקד של שם החולה – patientName לטופס. zimun-torim.component.html כפתורי רדיו – Radio […]

נניח שיש לנו טופס שבו מכניסים פרטים אישיים ואנחנו רוצים שהמשתמש יכניס את שמות הילדים שלו. בהתחלה יופיע שדה אחד, והמשתמש יוכל להוסיף שדות כמספר שהוא צריך על ידי לחיצה על כפתור. user.component.ts אפשר גם ליצור קבוצה ולא רק פקד אחד. user.component.ts הוספת ילד חדש: user.component.ts הורדת שדה של ילד: user.component.ts נסדר את הטופס בטמפלט. […]

בלי Form builder, לכל שדה שאנחנו מגדירים צריכים להשתמש במילה new. comp.ts עם Form builder ההגדרה של הטופס נקייה יותר. comp.ts כדי להשתמש ב-Form builder צריך לייבוא לתוך ה-app.module את הספרייה: comp.ts ולהוסיף אותה ל-import. שדה select כדי להוסיף שדה sekect עם ערכים בתוכו נגדיר את השדה בטופס שלנו: comp.ts בטופס עצמו: comp.html לבדיקת הסטטוס […]

כשעושים ולידציה לשדה בטופס מקבלים קוד שאומר האם הולידציה עברה או נכשלה. הקוד הזה נמצא בתוך fieldName.errors. כל ולידציה היא פונקציה שמקבלת control: AbstractControl ומחזירה ValidationErrors | null. נניח שאנחנו רוצים לעשות ולידציה לשם משתמש כך שהוא מחרוזת ללא רווחים. בתוך הקומפוננטה נשים את הפונקציה של הולידציה. comp.ts בהגדרת שדות הטופס, נחבר את פונקצית הולידציה. comp.ts בטמפלט נשתמש […]

Reactive Forms נותנים לנו אפשרות שליטה גדולה יותר וגמישות בבניית טפסים. מבנה הטופס מוגדר בתוך קובץ ה-ts. כדי להשתמש ב-reactive forms צריך לייבא אותם ל-app module. app.module.ts הגדרת טופס Reactive Form גם לקומפוננטה צריכים לייבא את רכיבי הטפסים. formComponent.ts אפשר גם לתת ערך ברירת מחדל לשדה בטופס. formComponent.ts Form disable אפשר להגדיר שדה כ-disabled. אחרי […]

סוגי טפסים טפסים משמשים לקליטת מידע מהמשתמש ולחיבור של מידע ל-DB. Template driven forms בטפסים מבוססי תבנית רוב העבודה מתבצעת בקובץ ה-html. מתאים לטפסים יחסית קצרים בלי לוגיקה מורכבת. Reactive form רוב העבודה מתבצעת ב-class כמו ולידציה, איתור שגיאות וכו' כשאנחנו מושכים מידע מ-DB רצף העבודה יהיה: Template -> Class -> Service -> Database. Template […]