آموزش فرم‌ها در Angular

یکی از مفاهیم کلیدی در توسعه وب‌اپلیکیشن‌های مدرن با Angular، کار با فرم‌ها است. در Angular، دو رویکرد اصلی برای ساخت و مدیریت فرم‌ها وجود دارد: Template-driven Forms و Reactive Forms. این مقاله آموزشی جامع به بررسی عمیق هر دو رویکرد می‌پردازد و تمام جنبه‌های مرتبط با “فرم‌ها در Angular” را از سطح مبتدی تا پیشرفته پوشش می‌دهد. اگر به دنبال آموزش Angular هستید و قصد دارید درک کاملی از این موضوع پیدا کنید، تا پایان مقاله با ما همراه باشید.

فرم‌ها در Angular

در توسعه وب‌اپلیکیشن‌ها، فرم‌ها یکی از ابزارهای کلیدی برای ارتباط کاربر با سیستم هستند. کاربران از طریق فرم‌ها اطلاعاتی مانند ثبت‌نام، ورود، جستجو، یا فیلترهای مختلف را وارد می‌کنند. Angular ابزارهای قدرتمندی برای ایجاد، مدیریت، و اعتبارسنجی فرم‌ها ارائه می‌دهد که این فرآیند را ساده و کارآمد می‌سازند.

چرا فرم‌ها در Angular اهمیت دارند؟

فرم‌ها در Angular به دلایل زیر اهمیت دارند:

مدیریت ساده داده‌ها: Angular امکان اتصال فرم‌ها به مدل داده را فراهم می‌کند، به طوری که داده‌های واردشده توسط کاربر به‌صورت خودکار با مدل همگام می‌شوند.
اعتبارسنجی قوی: Angular ابزارهایی برای انجام اعتبارسنجی‌های پیش‌فرض و سفارشی ارائه می‌دهد که کیفیت داده‌های ورودی را تضمین می‌کنند.
ساختار منسجم: استفاده از ساختارهای استاندارد برای مدیریت فرم‌ها باعث می‌شود کدها خواناتر، قابل نگهداری‌تر، و مقیاس‌پذیر باشند.

دو رویکرد اصلی برای مدیریت فرم‌ها

Angular دو رویکرد متفاوت برای مدیریت فرم‌ها ارائه می‌دهد که هر یک مزایا و کاربردهای خاص خود را دارند:

Template-driven Forms:
این روش بیشتر برای فرم‌های ساده و کوچک استفاده می‌شود.
بخش عمده منطق فرم در قالب (template) تعریف می‌شود و از ابزارهایی مانند ngModel برای اتصال داده‌ها و مدیریت آنها استفاده می‌گردد.
این رویکرد مناسب پروژه‌هایی است که فرم‌ها پیچیدگی زیادی ندارند و تعداد فیلدها کم است.

Reactive Forms:
این روش برای فرم‌های پیچیده‌تر و داینامیک طراحی شده است.
تعریف فرم‌ها در TypeScript انجام می‌شود و به شما کنترل کاملی بر وضعیت فرم‌ها، اعتبارسنجی، و رویدادها می‌دهد.
این رویکرد انعطاف‌پذیری بیشتری دارد و برای پروژه‌هایی با نیازمندی‌های پیچیده و فرم‌های بزرگ مناسب است.

انتخاب رویکرد مناسب

Template-driven Forms برای پروژه‌هایی که فرم‌ها ساده هستند و نیاز به تنظیمات پیچیده‌ای ندارند مناسب‌تر است، در حالی که Reactive Forms برای مدیریت فرم‌های پیچیده و سناریوهایی که به کنترل بیشتری نیاز دارند انتخاب بهتری است.

در ادامه این مقاله، هر دو روش را به‌صورت عمیق بررسی خواهیم کرد و با مثال‌های عملی، شما را با نحوه استفاده از آنها آشنا می‌کنیم.

تعریف و کاربرد Template-driven Forms

Template-driven Forms یکی از رویکردهای ساده و سریع در Angular برای ایجاد و مدیریت فرم‌ها است. همان‌طور که از نام آن مشخص است، تمرکز اصلی این روش بر روی قالب (template) است. این رویکرد مناسب پروژه‌هایی است که فرم‌ها ساده هستند و نیازی به منطق پیچیده در کدنویسی TypeScript ندارند. در این روش، تمامی تنظیمات، اعتبارسنجی‌ها و اتصال داده‌ها در فایل HTML انجام می‌شود.

کاربرد Template-driven Forms

مناسب برای فرم‌های ساده و کوچک مانند فرم‌های ورود، ثبت‌نام، یا فرم‌های تماس.
مناسب برای پروژه‌هایی که در آنها عملکرد فرم‌ها از پیچیدگی بالایی برخوردار نیست.
انتخاب ایده‌آل برای توسعه سریع فرم‌ها با حداقل کدنویسی.

استفاده از ngModel

یکی از مهم‌ترین ویژگی‌های Template-driven Forms، استفاده از دستورالعمل ngModel است که ارتباط دوطرفه داده‌ها (Two-way Data Binding) را فراهم می‌کند. با استفاده از این ویژگی، داده‌هایی که کاربر وارد می‌کند مستقیماً در مدل (Model) ذخیره می‌شوند و هرگونه تغییر در مدل نیز به‌صورت بلادرنگ در فرم منعکس می‌شود.

نحوه استفاده از ngModel:

<form #myForm=”ngForm”>
<label for=”name”>نام:</label>
<input
type=”text”
id=”name”
name=”name”
[(ngModel)]=”user.name”
required
/>
<button type=”submit” [disabled]=”myForm.invalid”>ارسال</button>
</form>

تحلیل کد بالا

اتصال داده با [(ngModel)]:

دستورالعمل [(ngModel)] ارتباط بین مقدار ورودی کاربر و متغیر user.name را برقرار می‌کند. هر تغییری که در فیلد ورودی اتفاق بیفتد، بلافاصله در متغیر مربوطه ذخیره می‌شود و برعکس.

مدیریت فرم با ngForm:

ویژگی #myForm=”ngForm” فرم را به یکی از کلاس‌های مدیریت فرم Angular متصل می‌کند که وضعیت کلی فرم مانند معتبر بودن (valid) یا نامعتبر بودن (invalid) را کنترل می‌کند.

اعتبارسنجی ساده:

ویژگی required به عنوان یک اعتبارسنجی پایه عمل می‌کند که بررسی می‌کند فیلد حتماً پر شود. اگر این شرط رعایت نشود، دکمه ارسال غیرفعال می‌شود.

ویژگی‌های کلیدی Template-driven Forms

سادگی: استفاده آسان با کمترین کدنویسی در TypeScript.
یکپارچگی با HTML: تمامی تنظیمات فرم از طریق ویژگی‌ها و دستورالعمل‌های Angular در قالب انجام می‌شود.
اعتبارسنجی خودکار: Angular با ابزارهای پیش‌فرض خود، به‌سادگی اعتبارسنجی فرم‌ها را مدیریت می‌کند.

این روش یک انتخاب سریع و مناسب برای پروژه‌های کوچک و فرم‌هایی است که نیاز به کنترل پیچیده یا رفتارهای خاص ندارند. در ادامه به اعتبارسنجی فرم‌ها و امکانات پیشرفته‌تر در این روش خواهیم پرداخت.

اعتبارسنجی فرم‌ها (Validation)

اعتبارسنجی فرم‌ها یکی از مهم‌ترین بخش‌های طراحی فرم در Angular است که اطمینان می‌دهد داده‌های وارد شده توسط کاربر مطابق با الزامات تعریف شده باشند. در Template-driven Forms، Angular ابزارهای داخلی برای اعتبارسنجی پایه فراهم می‌کند و همچنین امکان تعریف اعتبارسنجی‌های سفارشی نیز وجود دارد.

اعتبارسنجی‌های داخلی

Angular مجموعه‌ای از اعتبارسنجی‌های داخلی را ارائه می‌دهد که به‌راحتی می‌توان آنها را از طریق ویژگی‌های HTML اعمال کرد. این اعتبارسنجی‌ها عبارت‌اند از:

required: بررسی می‌کند که فیلد خالی نباشد.
email: بررسی می‌کند که مقدار وارد شده در فرمت ایمیل باشد.
minlength و maxlength: بررسی حداقل و حداکثر طول مجاز ورودی.
pattern: مطابقت ورودی با الگوی مشخص شده.

مثال از اعتبارسنجی داخلی

<input
  type="email"
  name="email"
  [(ngModel)]="user.email"
  required
  email
  #emailInput="ngModel"
/>
<div *ngIf="emailInput.errors?.required">ایمیل الزامی است.</div>
<div *ngIf="emailInput.errors?.email">فرمت ایمیل صحیح نیست.</div>

 

تحلیل کد بالا

اعتبارسنجی اجباری بودن (required):

ویژگی required بررسی می‌کند که فیلد ایمیل خالی نباشد. اگر این شرط رعایت نشود، پیام خطای “ایمیل الزامی است” نمایش داده می‌شود.

اعتبارسنجی فرمت ایمیل (email):

ویژگی email بررسی می‌کند که مقدار وارد شده در قالب معتبر ایمیل باشد (مثلاً example@example.com). در صورت عدم تطابق، پیام خطای “فرمت ایمیل صحیح نیست” نمایش داده می‌شود.

استفاده از #emailInput=”ngModel”:

این ویژگی مرجع محلی برای مدل ورودی ایجاد می‌کند که شامل اطلاعاتی درباره وضعیت و خطاهای فیلد است. با استفاده از آن می‌توان وضعیت خطاهای فیلد را بررسی کرد.

نمایش خطاها با استفاده از ngIf

با استفاده از ngIf، خطاهای اعتبارسنجی به‌صورت پویا بر اساس وضعیت فیلد نمایش داده می‌شوند. هر خطا به یک کلید در شیء errors مرتبط است که می‌توان آن را بررسی و مدیریت کرد.

اعتبارسنجی سفارشی

علاوه بر اعتبارسنجی‌های داخلی، می‌توانید اعتبارسنجی‌های سفارشی نیز تعریف کنید. این قابلیت زمانی مفید است که نیاز به بررسی‌های خاص دارید، مثلاً بررسی یکتا بودن یک نام کاربری. اعتبارسنجی‌های سفارشی معمولاً به‌صورت تابع نوشته می‌شوند و می‌توان آنها را در قالب یا TypeScript اعمال کرد.
مثال ساده از اعتبارسنجی سفارشی

<input
  type="text"
  name="username"
  [(ngModel)]="user.username"
  required
  #usernameInput="ngModel"
/>
<div *ngIf="usernameInput.errors?.customError">این نام کاربری مجاز نیست.</div>

در TypeScript:

function customValidator(control: NgModel): { [key: string]: any } | null {
  const forbidden = ['admin', 'test']; // مقادیر غیرمجاز
  return forbidden.includes(control.value) ? { customError: true } : null;
}

مزایای اعتبارسنجی در Template-driven Forms

سادگی: تعریف سریع اعتبارسنجی‌ها با استفاده از ویژگی‌های HTML.
پشتیبانی داخلی از خطاها: Angular به‌صورت خودکار وضعیت خطاهای فیلدها را مدیریت می‌کند.
انعطاف‌پذیری: امکان ترکیب اعتبارسنجی‌های داخلی و سفارشی برای مدیریت نیازهای پیچیده.

اعتبارسنجی فرم‌ها در Template-driven Forms به شما این امکان را می‌دهد که کیفیت داده‌های ورودی را بدون نیاز به نوشتن کد پیچیده تضمین کنید. در ادامه، به روش‌های پیشرفته‌تر مانند اعتبارسنجی‌های پیچیده و سفارشی در Reactive Forms خواهیم پرداخت.

تعریف و کاربرد Reactive Forms

Reactive Forms در Angular از رویکردی کاملاً ساختاریافته و مبتنی بر برنامه‌نویسی واکنشی استفاده می‌کند. این روش به توسعه‌دهندگان امکان می‌دهد فرم‌ها را در فایل TypeScript به‌صورت کاملاً مشخص و کنترل‌شده تعریف و مدیریت کنند.

ویژگی‌های کلیدی Reactive Forms:

انعطاف‌پذیری بالا: مناسب برای فرم‌های پیچیده که شامل بسیاری از فیلدها یا منطق پویا هستند.
کنترل کامل: توسعه‌دهنده می‌تواند به‌راحتی وضعیت، خطاها و تغییرات فیلدها را مدیریت کند.
مقیاس‌پذیری: طراحی مناسب برای فرم‌های بزرگ و سیستم‌هایی که نیاز به اعتبارسنجی پیشرفته و داینامیک دارند.

این روش به‌ویژه در موارد زیر توصیه می‌شود:

مدیریت فرم‌هایی با منطق پیچیده مانند نمایش یا مخفی کردن فیلدها به‌صورت داینامیک.
نیاز به بررسی و تغییر وضعیت فیلدها به‌صورت دستی.
پروژه‌هایی که نیاز به کدنویسی واضح‌تر و قابل تست دارند.

تعریف فرم‌ها با FormGroup و FormControl

در Reactive Forms، ساختار فرم از دو کلاس اصلی استفاده می‌کند:

FormGroup: نمایانگر مجموعه‌ای از کنترل‌ها (فیلدهای فرم) که می‌توانند به‌صورت گروهی مدیریت شوند.
FormControl: نمایانگر یک کنترل منفرد که داده، وضعیت و اعتبارسنجی آن کنترل می‌شود.

نحوه تعریف فرم با FormGroup و FormControl

در این روش، فرم به‌صورت کدنویسی در فایل TypeScript تعریف شده و به قالب HTML متصل می‌شود.

مثال: ساخت یک فرم ساده با دو فیلد (name و email):
TypeScript

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

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html'
})
export class ReactiveFormComponent {
  // تعریف فرم
  myForm = new FormGroup({
    name: new FormControl(''),  // مقدار اولیه برای name
    email: new FormControl('') // مقدار اولیه برای email
  });

  // متد ارسال فرم
  onSubmit() {
    console.log(this.myForm.value); // نمایش داده‌های فرم
  }
}

HTML

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="name">نام:</label>
  <input id="name" formControlName="name" />

  <label for="email">ایمیل:</label>
  <input id="email" formControlName="email" />

  <button type="submit">ارسال</button>
</form>

تحلیل کد بالا

تعریف FormGroup:
فرم به‌صورت یک شیء FormGroup تعریف شده که شامل دو فیلد name و email است.
هر فیلد به‌صورت یک FormControl تعریف شده که می‌تواند مقدار، وضعیت و اعتبارسنجی خود را داشته باشد.

اتصال فرم به HTML:
از دستور [formGroup] برای اتصال فرم تعریف‌شده در TypeScript به قالب HTML استفاده شده است.
ویژگی formControlName در هر ورودی، کنترل خاص مربوط به آن فیلد را مشخص می‌کند.

ارسال فرم:
رویداد (ngSubmit) به متد onSubmit متصل شده که داده‌های فرم را هنگام ارسال پردازش می‌کند.

مزایای استفاده از Reactive Forms

کنترل برنامه‌ریزی‌شده: تمامی ساختار و منطق فرم در TypeScript تعریف می‌شود، که امکان مدیریت دقیق‌تر را فراهم می‌کند.
اعتبارسنجی پیشرفته: به‌راحتی می‌توان اعتبارسنجی‌های پیچیده را تعریف و مدیریت کرد.
مدیریت تغییرات: هر تغییر در مقادیر فرم به‌صورت بلادرنگ قابل بررسی و پاسخگویی است.
قابلیت تست بالا: جدا بودن منطق فرم از قالب، امکان نوشتن تست‌های واحد برای فرم‌ها را ساده‌تر می‌کند.

این روش، به دلیل ساختار منظم و قابلیت‌های پیشرفته، برای پروژه‌های بزرگ و حرفه‌ای توصیه می‌شود. در بخش‌های بعدی، اعتبارسنجی و مدیریت فرم‌های داینامیک در Reactive Forms را بررسی خواهیم کرد.

اعتبارسنجی پیشرفته با Validators

یکی از ویژگی‌های کلیدی Reactive Forms در Angular، امکان اعمال اعتبارسنجی پیشرفته بر روی فیلدهای فرم با استفاده از Validators است. Validators مجموعه‌ای از توابع داخلی یا سفارشی هستند که به شما اجازه می‌دهند تا قوانین مختلفی را برای مقادیر ورودی فرم تعریف کنید.

انواع اعتبارسنجی با Validators

اعتبارسنجی داخلی (Built-in Validators):
Angular مجموعه‌ای از اعتبارسنج‌های آماده را فراهم کرده است، از جمله:
Validators.required: بررسی می‌کند که مقدار فیلد خالی نباشد.
Validators.email: بررسی می‌کند که مقدار فیلد با فرمت ایمیل مطابقت داشته باشد.
Validators.minLength(length): بررسی می‌کند که طول مقدار حداقل برابر مقدار مشخص‌شده باشد.
Validators.maxLength(length): بررسی می‌کند که طول مقدار حداکثر برابر مقدار مشخص‌شده باشد.
Validators.pattern(regex): بررسی می‌کند که مقدار با یک الگوی خاص (Regular Expression) مطابقت داشته باشد.

اعتبارسنجی سفارشی (Custom Validators):
اگر اعتبارسنجی‌های داخلی نیاز شما را برآورده نکنند، می‌توانید اعتبارسنجی‌های دلخواه خود را تعریف کنید.

نحوه استفاده از Validators

در Reactive Forms، اعتبارسنج‌ها به‌عنوان آرایه‌ای از توابع به FormControl پاس داده می‌شوند. این اعتبارسنج‌ها به‌صورت هم‌زمان اعمال شده و وضعیت فیلد را بررسی می‌کنند.
مثال: افزودن اعتبارسنجی به فیلدهای فرم

TypeScript:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
})
export class ReactiveFormComponent {
  myForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    email: new FormControl('', [
      Validators.required,
      Validators.email,
    ]),
  });

  // متد ارسال فرم
  onSubmit() {
    if (this.myForm.valid) {
      console.log('فرم معتبر است:', this.myForm.value);
    } else {
      console.log('فرم نامعتبر است.');
    }
  }
}

HTML:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="name">نام:</label>
  <input id="name" formControlName="name" />
  <div *ngIf="myForm.controls['name'].errors?.required">
    نام الزامی است.
  </div>
  <div *ngIf="myForm.controls['name'].errors?.minlength">
    حداقل طول نام باید ۳ کاراکتر باشد.
  </div>

  <label for="email">ایمیل:</label>
  <input id="email" formControlName="email" />
  <div *ngIf="myForm.controls['email'].errors?.required">
    ایمیل الزامی است.
  </div>
  <div *ngIf="myForm.controls['email'].errors?.email">
    فرمت ایمیل صحیح نیست.
  </div>

  <button type="submit" [disabled]="myForm.invalid">ارسال</button>
</form>

توضیحات کد

Validators.required:
فیلدها نمی‌توانند خالی باشند. اگر مقدار وارد نشود، خطای required رخ می‌دهد.

Validators.minLength(3):
مقدار واردشده برای نام باید حداقل ۳ کاراکتر باشد.

Validators.email:
بررسی می‌کند که مقدار واردشده برای ایمیل فرمت معتبر داشته باشد.

مدیریت خطاها در HTML:

از ویژگی‌های *ngIf برای نمایش پیام‌های خطا به کاربر استفاده شده است. هر خطا بر اساس کلید errors مربوط به آن فیلد مدیریت می‌شود.

تعریف اعتبارسنجی سفارشی

گاهی اوقات ممکن است به قوانین خاصی نیاز داشته باشید. در این صورت می‌توانید اعتبارسنجی‌های دلخواه خود را تعریف کنید.

مثال: اعتبارسنجی سفارشی برای بررسی ممنوع بودن یک مقدار خاص:

TypeScript:

import { AbstractControl, ValidationErrors } from '@angular/forms';

// تابع اعتبارسنجی سفارشی
export function forbiddenNameValidator(control: AbstractControl): ValidationErrors | null {
  const forbidden = control.value === 'admin';
  return forbidden ? { forbiddenName: { value: control.value } } : null;
}

استفاده در Reactive Forms:

this.myForm = new FormGroup({
  name: new FormControl('', [Validators.required, forbiddenNameValidator]),
});

HTML:

<div *ngIf="myForm.controls['name'].errors?.forbiddenName">
  استفاده از "admin" مجاز نیست.
</div>

نکات کلیدی

با استفاده از ترکیب اعتبارسنج‌های داخلی و سفارشی، می‌توانید کنترل کاملی بر داده‌های ورودی فرم داشته باشید.
پیام‌های خطا را به‌صورت واضح و کاربرپسند ارائه دهید تا تجربه کاربری بهتری ایجاد کنید.
برای فرم‌های پیچیده و اعتبارسنجی‌های زیاد، استفاده از توابع کمکی برای مدیریت خطاها توصیه می‌شود.

در بخش بعدی، مدیریت فرم‌های داینامیک در Reactive Forms را بررسی خواهیم کرد.

مدیریت فرم‌های داینامیک در Reactive Forms

یکی از قدرتمندترین ویژگی‌های Reactive Forms در Angular، پشتیبانی از فرم‌های داینامیک است. این قابلیت به شما اجازه می‌دهد تا فرم‌هایی با تعداد فیلدهای متغیر ایجاد کنید، مثلاً لیستی از مهارت‌ها، آدرس‌ها یا اطلاعات تماس که کاربر بتواند به‌صورت پویا آیتم‌هایی را اضافه یا حذف کند. برای این منظور، از FormArray استفاده می‌شود.

معرفی FormArray

FormArray یکی از کلاس‌های Angular است که برای مدیریت آرایه‌ای از کنترل‌های فرم طراحی شده است. این کنترل‌ها می‌توانند شامل فیلدهای ساده یا گروه‌هایی از فیلدها باشند.

ویژگی‌های کلیدی FormArray:

اضافه کردن آیتم‌ها به آرایه: با استفاده از متد push.
حذف آیتم‌ها از آرایه: با استفاده از متد removeAt.
دسترسی به آیتم‌های آرایه: از طریق اندیس‌ها.

مراحل ایجاد فرم‌های داینامیک

1. تعریف FormArray در کد TypeScript

برای تعریف فرم داینامیک، می‌توانید از FormBuilder برای راحتی استفاده کنید:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
})
export class DynamicFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      skills: this.fb.array([this.fb.control('')]), // شروع با یک فیلد
    });
  }

  // متد برای اضافه کردن فیلد جدید
  addSkill() {
    (this.myForm.get('skills') as FormArray).push(this.fb.control(''));
  }

  // متد برای حذف فیلد
  removeSkill(index: number) {
    (this.myForm.get('skills') as FormArray).removeAt(index);
  }

  // دسترسی به FormArray
  get skills(): FormArray {
    return this.myForm.get('skills') as FormArray;
  }

  // ارسال فرم
  onSubmit() {
    console.log(this.myForm.value);
  }
}

2. کد HTML برای نمایش و مدیریت فرم داینامیک

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div formArrayName="skills">
    <div *ngFor="let skill of skills.controls; let i = index">
      <input [formControlName]="i" placeholder="مهارت" />
      <button type="button" (click)="removeSkill(i)">حذف</button>
    </div>
  </div>
  <button type="button" (click)="addSkill()">افزودن مهارت</button>
  <button type="submit">ارسال فرم</button>
</form>

توضیحات کد

تعریف FormArray در گروه فرم (FormGroup):
آرایه‌ای از کنترل‌ها با استفاده از skills: this.fb.array([this.fb.control(”)]) ایجاد شده است. این آرایه می‌تواند در ابتدا شامل یک یا چند مقدار پیش‌فرض باشد.

اضافه کردن آیتم جدید به FormArray:
متد addSkill از push برای اضافه کردن کنترل جدید به آرایه استفاده می‌کند.

حذف آیتم از FormArray:
متد removeSkill با استفاده از removeAt(index) آیتمی را از آرایه حذف می‌کند.

نمایش آرایه در قالب HTML:
از *ngFor برای پیمایش آرایه و نمایش کنترل‌ها در قالب استفاده شده است.

ارسال داده‌ها:
داده‌های فرم با استفاده از متد onSubmit به‌صورت آرایه‌ای از مقادیر ارسال می‌شوند.

قابلیت‌ها و مزایای مدیریت فرم‌های داینامیک

انعطاف‌پذیری بالا: می‌توانید فرم‌هایی با تعداد فیلدهای پویا و قابل تغییر بسازید.
مقیاس‌پذیری: مناسب برای اپلیکیشن‌هایی که نیاز به مدیریت داده‌های پیچیده دارند.
سادگی در مدیریت داده‌ها: با استفاده از متدهای داخلی مانند push، removeAt و controls، کار با فرم‌های پیچیده ساده‌تر می‌شود.

مثال پیشرفته: اضافه کردن گروه‌های فرم داینامیک

گاهی اوقات نیاز دارید گروهی از فیلدها (مانند نام و شماره تماس) را به‌صورت داینامیک اضافه کنید. برای این کار می‌توانید از FormGroup در داخل FormArray استفاده کنید.

TypeScript:

this.myForm = this.fb.group({
  contacts: this.fb.array([
    this.fb.group({
      name: this.fb.control(''),
      phone: this.fb.control(''),
    }),
  ]),
});

addContact() {
  (this.myForm.get('contacts') as FormArray).push(
    this.fb.group({
      name: this.fb.control(''),
      phone: this.fb.control(''),
    })
  );
}

HTML:

<div formArrayName="contacts">
  <div *ngFor="let contact of myForm.get('contacts').controls; let i = index" [formGroupName]="i">
    <input formControlName="name" placeholder="نام" />
    <input formControlName="phone" placeholder="شماره تماس" />
    <button type="button" (click)="removeContact(i)">حذف</button>
  </div>
</div>
<button type="button" (click)="addContact()">افزودن مخاطب</button>

فرم‌های داینامیک یکی از قابلیت‌های کلیدی و بسیار کاربردی در Reactive Forms هستند که امکان مدیریت فرم‌های پویا با داده‌های متغیر را به شما می‌دهند. با استفاده از FormArray و قابلیت‌های دیگر، می‌توانید فرم‌هایی مقیاس‌پذیر، انعطاف‌پذیر و کاربردی ایجاد کنید که تجربه کاربری بهتری را فراهم می‌کند.

نتیجه‌گیری

فرم‌ها در Angular یکی از ابزارهای کلیدی برای تعامل با کاربران و جمع‌آوری داده‌ها در اپلیکیشن‌های وب هستند. با ارائه دو رویکرد قدرتمند Template-driven Forms و Reactive Forms، Angular امکان پیاده‌سازی انواع فرم‌ها، از ساده‌ترین تا پیچیده‌ترین، را فراهم می‌کند. روش Template-driven برای فرم‌های کوچک و سریع مناسب است، در حالی که Reactive Forms کنترل بیشتری روی داده‌ها، اعتبارسنجی‌ها و ساختار داینامیک فرم‌ها به توسعه‌دهندگان می‌دهد.

انتخاب مناسب‌ترین روش بستگی به نیازهای پروژه و سطح پیچیدگی فرم‌ها دارد. با استفاده از این دو رویکرد، می‌توانید تجربه‌ای کاربرپسند و داده‌هایی دقیق و معتبر در اپلیکیشن‌های خود ارائه دهید. برای یادگیری بیشتر درباره فرم‌ها در Angular، می‌توانید به مستندات رسمی Angular و منابع آموزشی آنلاین معتبر مراجعه کنید.