איך יוצרים טופס פשוט – אנגולר וטפסים מגיבים | Reactive Forms

כל מה שמכיר אנגולר (או שלא מכיר ועכשיו נתקל בפוסט הזה) . ישנם 2 צורות לכתוב טפסים:

1. Reactive Forms
2. Template Driven Forms

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

Reactive Forms

להלן 2 הקבצים המגדירים טופס באנגולר:

1. קובץ הHTML הכולל את המבנה של הטופס בשילוב עם רכיבי אנגולאר שעושים הרבה קסם לטופס, כמו ולידציות ושיוך כל אינפוט לאובייקט אשר יוגדר בקבוץ TS
2. קובץ ה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, ונציג טופס מורכב יותר עם רכיבים שונים

פוסטים קשורים:

מדריך אנגולר | reactive forms – היכרות בסיסית עם AbstractControl מדריך אנגולר | סיכום מיני קורס אנגולר reactive forms מדריך אנגולר | reactive forms – בסיס לבניית הטופס המגיב. מדריך אנגולר | reactive forms – חיבור הטופס הריאקטיבי לתצוגת הטופס