معرفی فرم‌ها
فرم‌ها در انگولار یکی از ابزارهای کلیدی برای تعامل کاربر با برنامه‌های تحت وب هستند. معرفی فرم‌ها در انگولار به توسعه‌دهندگان این امکان را می‌دهد تا داده‌های ورودی کاربران را به‌صورت ساختاریافته دریافت، اعتبارسنجی و مدیریت کنند. در معماری مبتنی بر کامپوننت، فرم‌ها نقش حیاتی در مدیریت وضعیت (state management) و جریان داده (data flow) بین رابط کاربری و منطق برنامه دارند. انگولار دو نوع اصلی از فرم‌ها را پشتیبانی می‌کند: Template-driven Forms و Reactive Forms. در پروژه‌های ساده، از فرم‌های مبتنی بر قالب استفاده می‌شود که به سادگی از طریق ngModel داده‌ها را به مدل متصل می‌کند. اما در برنامه‌های پیچیده‌تر، فرم‌های واکنشی کنترل دقیق‌تر و ساختارمندتری را برای داده‌ها فراهم می‌سازند.
در این آموزش، با اصول اولیه ساخت فرم‌ها، نحوه‌ی اتصال داده‌ها، اعتبارسنجی ورودی‌ها، و کنترل وضعیت فرم‌ها در انگولار آشنا می‌شوید. همچنین خواهید آموخت چگونه از قابلیت‌های lifecycle برای به‌روزرسانی پویا و بهینه فرم‌ها استفاده کنید. این مباحث به شما کمک خواهند کرد تا فرم‌هایی کارا، امن و مقیاس‌پذیر برای برنامه‌های SPA مدرن بسازید.
مثال پایه
typescript// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
bootstrap: [AppComponent]
})
export class AppModule {}
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
name: string = '';
onSubmit() {
alert('نام وارد شده: ' + this.name);
}
}
// app.component.html
<form (ngSubmit)="onSubmit()">
<label>نام:</label>
<input type="text" [(ngModel)]="name" name="name" required>
<button type="submit">ارسال</button>
</form>در مثال بالا، یک فرم ساده در انگولار ساخته شده است که از FormsModule برای مدیریت داده‌های ورودی استفاده می‌کند. در فایل app.module.ts ما FormsModule را ایمپورت کرده‌ایم تا قابلیت‌های ngModel فعال شوند. در کامپوننت اصلی (AppComponent)، متغیر name به عنوان بخشی از وضعیت کامپوننت تعریف شده و با استفاده از binding دوطرفه [(ngModel)] به فیلد ورودی متصل شده است.
وقتی کاربر نام خود را وارد می‌کند، مقدار آن به صورت خودکار در خاصیت name ذخیره می‌شود. با ارسال فرم (ngSubmit)، متد onSubmit() اجرا می‌شود و مقدار وارد شده نمایش داده می‌شود. این الگو یکی از پایه‌ای‌ترین نمونه‌های پیاده‌سازی معرفی فرم‌ها در انگولار است که اصول جریان داده از کاربر به منطق برنامه را نشان می‌دهد.
این ساختار از lifecycle طبیعی انگولار پیروی می‌کند: ابتدا مقداردهی اولیه انجام می‌شود، سپس تغییرات کاربر به‌صورت واکنشی به روز می‌شود. این روش از بروز اشتباهاتی مانند تغییر مستقیم state جلوگیری می‌کند و از الگوی component-based بهره می‌برد.
مثال کاربردی
typescript// reactive-form.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-reactive-form',
templateUrl: './reactive-form.component.html'
})
export class ReactiveFormComponent implements OnInit {
userForm!: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.userForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.email]]
});
}
onSubmit() {
if (this.userForm.valid) {
console.log(this.userForm.value);
} else {
console.log('فرم نامعتبر است');
}
}
}
// reactive-form.component.html
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<label>نام کاربری:</label>
<input formControlName="username" type="text">
<label>ایمیل:</label>
<input formControlName="email" type="email">
<button type="submit">ثبت</button>
</form>Advanced انگولار Implementation
typescript// advanced-form.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-advanced-form',
templateUrl: './advanced-form.component.html'
})
export class AdvancedFormComponent implements OnInit, OnDestroy {
profileForm!: FormGroup;
valueChangesSub!: Subscription;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.profileForm = this.fb.group({
name: ['', Validators.required],
age: [null, [Validators.required, Validators.min(18)]],
email: ['', [Validators.required, Validators.email]]
});
this.valueChangesSub = this.profileForm.valueChanges.subscribe(val => {
console.log('تغییرات فرم:', val);
});
}
onSubmit() {
if (this.profileForm.valid) {
alert('فرم معتبر و آماده ارسال است!');
}
}
ngOnDestroy() {
this.valueChangesSub.unsubscribe();
}
}بهترین روش‌ها و خطاهای متداول در انگولار برای کار با فرم‌ها شامل استفاده از ReactiveForms برای کنترل بهتر داده، اجتناب از دست‌کاری مستقیم state و مدیریت مناسب Lifecycle می‌باشد. یکی از اشتباهات رایج، عدم استفاده از Validators و بررسی صحت داده‌ها پیش از ارسال است که می‌تواند باعث بروز خطاهای امنیتی شود. همچنین، استفاده از binding نادرست می‌تواند منجر به رندرهای غیرضروری و افت عملکرد شود.
برای بهینه‌سازی عملکرد، توصیه می‌شود از OnPush ChangeDetection و unsubscribe کردن از Observables هنگام نابودی کامپوننت استفاده کنید. در زمینه‌ی امنیت، داده‌های ورودی باید همیشه اعتبارسنجی و ضد تزریق (sanitized) شوند.
در هنگام دیباگ، از ابزارهای DevTools برای بررسی وضعیت فرم‌ها و Observables استفاده کنید. در نهایت، فرم‌ها باید به گونه‌ای طراحی شوند که قابل توسعه و نگهداری باشند تا بتوان در پروژه‌های سازمانی بزرگ به راحتی از آن‌ها بهره‌برداری کرد.
📊 مرجع کامل
| انگولار Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| FormGroup | مدیریت مجموعه‌ای از کنترل‌ها | new FormGroup({...}) | this.form = new FormGroup({name: new FormControl('')}) | برای فرم‌های واکنشی استفاده می‌شود |
| FormControl | کنترل تک فیلد در فرم | new FormControl('') | name = new FormControl('') | قابل اعتبارسنجی |
| FormBuilder | ساخت ساده‌تر FormGroup | this.fb.group({...}) | this.form = this.fb.group({...}) | کوتاه‌تر از ساختار مستقیم |
| Validators.required | الزامی بودن فیلد | Validators.required | ['', Validators.required] | برای بررسی ورودی اجباری |
| Validators.email | بررسی ایمیل معتبر | Validators.email | ['', Validators.email] | برای فیلد ایمیل |
| valueChanges | شنود تغییرات فرم | this.form.valueChanges.subscribe() | کنترل تغییر داده‌ها | مفید برای فرم‌های پویا |
| formGroup | بایند کردن فرم به DOM | [formGroup]="form" | <form [formGroup]="form">...</form> | ویژگی ساختاری در قالب |
| formControlName | اتصال فیلد به کنترل | formControlName="name" | <input formControlName="email"> | برای ReactiveForms |
| ngModel | اتصال داده دوطرفه | [(ngModel)]="name" | <input [(ngModel)]="value"> | برای TemplateForms |
| ngSubmit | مدیریت ارسال فرم | (ngSubmit)="onSubmit()" | <form (ngSubmit)="submit()"> | رویداد ارسال فرم |
📊 Complete انگولار Properties Reference
| Property | Values | Default | Description | انگولار Support |
|---|---|---|---|---|
| updateOn | 'change' | 'change' | تعیین زمان اعتبارسنجی | v14+ |
| disabled | true/false | false | غیرفعال کردن کنترل | v2+ |
| status | 'VALID','INVALID' | VALID | وضعیت اعتبار فرم | v2+ |
| pristine | true/false | true | آیا کاربر تغییری داده است | v2+ |
| dirty | true/false | false | تغییر داده شده یا خیر | v2+ |
| touched | true/false | false | کاربر کلیک کرده یا نه | v2+ |
| untouched | true/false | true | عدم تعامل کاربر | v2+ |
| valid | true/false | false | اعتبار فرم | v2+ |
| invalid | true/false | true | عدم اعتبار فرم | v2+ |
| value | any | {} | مقادیر فعلی فرم | v2+ |
| errors | object | null | خطاهای موجود در کنترل | v2+ |
خلاصه و گام‌های بعدی در انگولار
در این بخش یاد گرفتید چگونه فرم‌ها در انگولار ایجاد، مدیریت و اعتبارسنجی می‌شوند. شما اکنون می‌دانید چگونه از Template-driven و Reactive Forms برای ایجاد تعاملات کاربر استفاده کنید. در گام‌های بعدی پیشنهاد می‌شود با مفاهیم اعتبارسنجی سفارشی (Custom Validators)، مدیریت خطاها و اتصال فرم‌ها به سرویس‌های HTTP در انگولار آشنا شوید. تمرکز بر بهینه‌سازی داده‌ها، مدیریت مؤثر State و کنترل رویدادها، شما را به سطح حرفه‌ای در توسعه فرم‌های انگولار می‌رساند. برای یادگیری بیشتر، منابع رسمی Angular.io و مستندات Reactive Forms پیشنهاد می‌شوند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود