מדריך אנגולר | reactive forms – בסיס לבניית הטופס המגיב.

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

1. Bacis Form
2. Form Builder

האפשרות הבסיסית ליצירת טופס, ניתנת על ידי הגדרה של formGroup ו formControls בתוכו. להלן דוגמה פשוטה:

profileForm = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl(''),
  });

כמו כן אפשר לשחק עם זה. אפשר לייצר formGroups נוספים בתוך formGroups ולהוסיף גם formArrays וכו..

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

להלן דוגמה של טופס בסיסי בשימוש FormBuilder:

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: ['']
    }),
  });

  constructor(private fb: FormBuilder) { }
}

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

מה זה ["] : זה למעשה קיצר של formControl אפשר גם לרשום את זה באופן המלא :

export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: this.fb.control('',Validators.required),
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: ['']
    }),
  });

בטח שמתם לב, שעל שם השם יש וולידציה. אפשר גם להוסיף כמה וולידציות על ידי הוספת מערך [] ולשים בתוכו את כל הווליצדיות הרצויות.

למשל :

firstName: this.fb.control('',[Validators.required, Validators.pattern(/[a-zA-Z]+/)]),

ברכותיי! בניתם טופס ריאקטיבי לראשונה! אבל.. יש עוד דרך ארוכה ומהנה 😎 . נתראה בפרק הבא.

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

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