כל מה שמכיר אנגולר (או שלא מכיר ועכשיו נתקל בפוסט הזה) . ישנם 2 צורות לכתוב טפסים:
- Reactive Forms
- Template Driven Forms
כחלק ממדריך יצירת טפסים באנגולר, תוכלו לדפדף בין הפוסטים השונים הקשורים לטפסים באנגולר.
Reactive Forms
להלן 2 הקבצים המגדירים טופס באנגולר:
- קובץ הHTML הכולל את המבנה של הטופס בשילוב עם רכיבי אנגולאר שעושים הרבה קסם לטופס, כמו ולידציות ושיוך כל אינפוט לאובייקט אשר יוגדר בקבוץ TS
- קובץ הTS. בניית האובייקט של הטופס.
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)"> <label> שם פרטי: <input type="text" formControlName="firstName"> </label> <label> שם משפחה: <input type="text" formControlName="lastName"> </label> <button [disabled]="myForm.invalid" type="submit">אישור</button> </form>
לפני שאתם מעלים סימני שאלה לגבי דברים שאולי לא ברורים (כמו זה: [formGroup]="myForm"). כמו כן אפשר לחזור לפוסט הראשון של המדריך reactive form אנגולר – יוצאים לדרך נתייחס רגע למשהו אחד ספציפי. אפשר לראות טופס סופר בסיסי של שתי שדות אינפוט של טקסט. שמוגדר להן formControlName. שזה בעצם מה שמעביר אותנו לקובץ הבא:
import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-profile-editor', templateUrl: './profile-editor.component.html', styleUrls: ['./profile-editor.component.css'] }) export class ProfileEditorComponent implements OnInit{ public myForm : FormGroup; constuctor() {}; ngOnInit(){ this.myForm = new FormGroup({ firstName: new FormControl(''), lastName: new FormControl(''), }); }; onSubmit(form: FormGroup) { // בניסיון ההדפסה נקבל: console.log('Valid?', form.valid); // true or false console.log('first name', form.value.firstName); //first name השם שלכם console.log('last name', form.value.lastName); //last name שם המשפחה שלכם console.log('all data', form.value); // all data{firstName : תניני, lastName : פניני} } }
אוקי אז גם פה יש הרבה דברים אז מי שלא מבין לגמרה מה שהוא רואה עדיפות גבוהה לחזור לפוסט: reactive form אנגולר – יוצאים לדרך.
אז מה יש לנו פה בעצם? זה אולי נראה מורכב בהתחלה אבל אם נסתכל על שורות 13-16 נראה שזה בסהכ מגדיר אובייקט, שמגדיר את השדות של האינפוטים. כלומר יצרנו key בשם firstName שהערך שלו יהיה הערך שנבחר להקליד באינפוט, ולכן באינפונט נאלצנו להגדיר : formControlName="firstName" . שהוא המקשר לאובייקט שבנינו . ככה אנגולר מאפשר לנו לבנות טפסים מורכבים ולקבל מידע ולעשות בו שימוש בקומפוננטות השונות. כמו כן להזין טפסים במצב של עריכה. כלומר אפשר גם למלא את האובייקט מראש במידע ולראות שהוא מוצג בטופס בHTML.
עכשיו שהבנו קצת מה זה האובייט הזה ואיך מקשרים אותו לטופס , נמשיך הלאה לצורה נוספת של בניית טופס בעזרת FormBuilder, ונציג טופס מורכב יותר עם רכיבים שונים