טפסים באנגולר

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

ניצור תוכנית לדוגמא שעליה נעבוד. אחרי יצירת התוכנית נתקין bootstrap כדי להקל על עיצוב המסך.

סוגי טפסים באנגולר

לאנגולר יש 2 מערכות של בניית טפסים. בדרך כלל משתמשים בסוג אחד בפרוייקט. הסיבה שיש 2 סוגים היא שיש מערכת פשוטה יותר לשימוש והיא template forms והשנייה קצת יותר מורכבת, אבל מאפשרת פעולות מורכבות יותר בטפסים והיא reactive forms.

Reactive Forms

ב-Reactive Forms רוב הלוגיקה תהיה בקוד שנכתוב בתוך הקומפוננטה. שם ניצור סדרת אובייקטים שמייצגים את הטופס והשדות שלו. שימוש ב-Reactive Forms מתאים לטפסים מורכבים, למשל עם הרבה שדות או ולידציה מורכבת.

Reactive Forms יחשפו אלמנטים מהטופס כ-Observables.

כדי להשתמש ב-Reactive Forms צריך לייבא את המודול למודול הראשי.

Template Forms

הלוגיקה כתובה בעיקר בתוך קובץ ה-template. מיועד לטפסים פשוטים עם מעט שדות ומעט ולידציה.

קשה יותר לעבוד עם שדות דינמים, למשל רשימות שמוסיפים ומוחקים מהם שורות.

התחלת השימוש ב-Reactive Forms

כדי לעבוד עם Reactive Forms נייבא את המודול שלו.

קובץ app.module.ts

import { ReactiveFormsModule } from '@angular/forms';
...
imports: [
    BrowserModule,
    ReactiveFormsModule
  ],

יצירת טופס עם Reactive Forms

ניצור קומפוננטה חדשה שבתוכה ישב טופס האשראי.

ng g c components/CardForm

כדי להתחיל לעבוד עם Reactive Forms צריך לייבא שתי ספריות.

קובץ card-form.component.ts

import { FormGroup, FormControl } from '@angular/forms'

השלב הבא הוא לאתחל בקומפוננטה FormGroup ובתוכו כמה FormControl לשדות הטופס.

ביצירת FormGroup נעביר אובייקט כמשתנה הראשון ובתוכו נספק אוסף של key:value. כולם מייצגים את שדות הטופס שלנו.

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

יצירת האובייקטים האלה עדיין לא יוצרת שדות html בתבנית העמוד.

קובץ card-form.component.ts

export class CardFormComponent {
  cardForm = new FormGroup({
    name: new FormControl('')
  });
}

הוספת Reactive Form לתבנית

אחרי יצירת אובייקט הטופס, נוסיף אותו לתבנית ה-html. נתחיל מחיבור ראשוני בין תגית הטופס לאובייקט הטופס.

קובץ card-form.component.html

<form [formGroup]="cardForm">
  
</form>

עכשיו נוסיף שדה טקסט שיתחבר לשדה באובייקט הטופס שלנו.

<form [formGroup]="cardForm">
  <input formControlName="name" />
</form>

ההגדרה של formControlName אומרת ללכת לטופס שלנו ולחפש את השדה המוגדר. במקרה הזה לחפש את שדה name בטופס cardForm.

בדיקת שגיאות בטופס

על מנת למצוא בקלות שגיאות בטופס בזמן הפיתוח נוסיף לתבנית את הקוד הבא. לפני הפצת הקוד נבטל את השורות האלה.

<form [formGroup]="cardForm">
  <input formControlName="name" />
</form>

<div>Form Contents: {{ cardForm.value | json}}</div>
<div>Form is valid: {{ cardForm.valid }}</div>