اعتبارسنجی فرم
اعتبارسنجی فرم در انگولار یک بخش حیاتی برای توسعه برنامه‌های وب مدرن و SPAها است. این قابلیت تضمین می‌کند که داده‌های ورودی کاربران با قواعد و محدودیت‌های تعریف شده مطابقت دارند، که منجر به افزایش صحت داده‌ها و بهبود تجربه کاربری می‌شود. در پروژه‌های بزرگ، مدیریت وضعیت فرم و جریان داده‌ها چالش برانگیز است؛ انگولار با ساختار مبتنی بر کامپوننت‌ها این کار را ساده و سازمان‌یافته می‌کند. همچنین، اعتبارسنجی فرم به توسعه‌دهندگان کمک می‌کند تا از prop drilling، re-render غیرضروری و تغییرات مستقیم وضعیت جلوگیری کنند و فُرم‌های قابل استفاده مجدد و قابل نگهداری ایجاد کنند.
در این آموزش، یاد خواهید گرفت چگونه از Reactive Forms در انگولار برای ایجاد فرم‌های پویا و امن استفاده کنید. این شامل استفاده از FormBuilder، FormGroup، FormControl و Validators است. همچنین، چگونگی پیاده‌سازی اعتبارسنجی همزمان و غیرهمزمان، استفاده از valueChanges برای رصد تغییرات داده‌ها، و بهینه‌سازی عملکرد با lifecycle hooks توضیح داده خواهد شد. در نهایت، توسعه‌دهندگان قادر خواهند بود فرم‌های واقعی، قابل اطمینان و با تجربه کاربری مناسب برای پروژه‌های انگولار بسازند.
مثال پایه
typescriptimport { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-basic-form',
template: `
<form [formGroup]="userForm" (ngSubmit)="onSubmit()"> <label for="username">نام کاربری:</label> <input id="username" formControlName="username" />
<div *ngIf="userForm.get('username')?.invalid && userForm.get('username')?.touched">
نام کاربری الزامی است و حداقل 4 کاراکتر باشد. </div>
<label for="email">ایمیل:</label>
<input id="email" formControlName="email" />
<div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
لطفاً یک ایمیل معتبر وارد کنید.
</div>
<button type="submit" [disabled]="userForm.invalid">ارسال</button>
</form>
`
})
export class BasicFormComponent {
userForm: FormGroup;
constructor(private fb: FormBuilder) {
this.userForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(4)]],
email: ['', [Validators.required, Validators.email]]
});
}
onSubmit() {
if (this.userForm.valid) {
console.log('فرم ارسال شد:', this.userForm.value);
}
}
}در این مثال پایه، ما یک فرم Reactive در انگولار ایجاد کرده‌ایم. با استفاده از FormBuilder و FormGroup، کنترل‌های فرم و وضعیت آن‌ها به صورت مرکزی مدیریت می‌شوند. Validators.required و Validators.minLength برای نام کاربری و Validators.email برای ایمیل اعمال شده است. در قالب (template)، با استفاده از formControlName کنترل‌ها به فرم متصل شده‌اند و با *ngIf پیام‌های خطای اعتبارسنجی نمایش داده می‌شوند. تابع onSubmit() تنها زمانی اجرا می‌شود که فرم معتبر باشد، که صحت داده‌ها را تضمین می‌کند. این پیاده‌سازی نشان‌دهنده بهترین شیوه‌ها در طراحی مبتنی بر کامپوننت، جریان داده تمیز و جلوگیری از re-render غیرضروری است.
مثال کاربردی
typescriptimport { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';
@Component({
selector: 'app-advanced-form',
template: `
<form [formGroup]="profileForm" (ngSubmit)="submitProfile()"> <label for="fullName">نام کامل:</label> <input id="fullName" formControlName="fullName" />
<div *ngIf="profileForm.get('fullName')?.invalid && profileForm.get('fullName')?.touched">
نام الزامی است و حداقل 4 کاراکتر باشد. </div>
<label for="email">ایمیل:</label>
<input id="email" formControlName="email" />
<div *ngIf="profileForm.get('email')?.invalid && profileForm.get('email')?.touched">
لطفاً یک ایمیل معتبر وارد کنید.
</div>
<label for="age">سن:</label>
<input id="age" type="number" formControlName="age" />
<div *ngIf="profileForm.get('age')?.invalid && profileForm.get('age')?.touched">
سن باید بین 18 تا 99 باشد.
</div>
<button type="submit" [disabled]="profileForm.invalid">ذخیره</button>
</form>
`
})
export class AdvancedFormComponent implements OnInit {
profileForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.profileForm = this.fb.group({
fullName: ['', [Validators.required, Validators.minLength(4)]],
email: ['', [Validators.required, Validators.email]],
age: [null, [Validators.required, Validators.min(18), Validators.max(99)]]
});
this.profileForm.valueChanges.pipe(debounceTime(300)).subscribe(value => {
console.log('تغییرات فرم:', value);
});
}
submitProfile() {
if (this.profileForm.valid) {
console.log('پروفایل ذخیره شد:', this.profileForm.value);
}
}
}در مثال پیشرفته، فیلد age و استفاده از debounceTime در valueChanges اضافه شده است. Validators.min و Validators.max محدوده معتبر سن را بررسی می‌کنند. debounceTime از اجرای re-render غیرضروری جلوگیری می‌کند و عملکرد فرم را بهبود می‌بخشد. استفاده از FormBuilder و FormGroup، فرم را ماژولار و قابل استفاده مجدد می‌کند. این مثال نشان‌دهنده تکنیک‌های کلیدی SPAs شامل بازخورد زمان واقعی، کنترل‌های پویا و اعتبارسنجی غیرهمزمان است. پیاده‌سازی متمرکز اعتبارسنجی باعث بهبود عملکرد، نگهداری و تجربه کاربری می‌شود.
بهترین شیوه‌ها در انگولار برای اعتبارسنجی فرم شامل استفاده از FormBuilder، اعمال Validators، و جلوگیری از تغییر مستقیم کنترل‌هاست. Prop drilling و re-render غیرضروری با مدیریت مرکزی وضعیت کاهش می‌یابد. برای بهینه‌سازی عملکرد، debounceTime روی valueChanges اعمال شود. برای اشکال‌زدایی از Angular DevTools یا console.log استفاده کنید. از نظر امنیتی، اعتبارسنجی سمت سرور به همراه اعتبارسنجی سمت کاربر ضروری است. منطق اعتبارسنجی پیچیده را در Services یا Custom Validators قرار دهید تا قابل استفاده مجدد و تست باشد.
📊 جدول مرجع
| انگولار Element/Concept | Description | Usage Example |
|---|---|---|
| FormGroup | گروهی از چند کنترل فرم | this.fb.group({fullName: ['', Validators.required]}) |
| FormControl | یک کنترل فرم منفرد | new FormControl('', Validators.email) |
| FormBuilder | سرویس برای ساخت فرم‌ها | constructor(private fb: FormBuilder) |
| Validators | قوانین اعتبارسنجی داخلی | Validators.required, Validators.minLength(4) |
| valueChanges | Observable تغییرات فرم | this.profileForm.valueChanges.subscribe(value => ...) |
| ngSubmit | رویداد هنگام ارسال فرم | <form (ngSubmit)="submitProfile()"> |
یادگیری اعتبارسنجی فرم در انگولار شامل درک فرم‌های Reactive، مدیریت مؤثر وضعیت و جریان داده تمیز است. توسعه‌دهندگان اکنون قادر خواهند بود فرم‌های پیچیده، قابل استفاده مجدد و امن بسازند و از خطاهای رایج جلوگیری کنند. مراحل بعدی شامل یادگیری Dynamic FormArrays، Validators غیرهمزمان و encapsulation منطق در Services است. این موارد به ایجاد SPAs پایدار و بهبود تجربه کاربری کمک می‌کند. منابعی مانند مستندات Angular، آموزش‌های پیشرفته و تمرین‌های عملی برای یادگیری ادامه‌دار مفید هستند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود