Reactive Forms در مقابل Template-driven Forms
Reactive Forms ساختار فرم را بهطور کامل در کد TypeScript با FormGroup و FormControl تعریف میکند و کنترل و تستپذیری بالایی دارد، در حالی که Template-driven Forms عمدتاً در HTML با دایرکتیوهایی مثل ngModel تعریف میشود و برای فرمهای ساده سریعتر نوشته میشود.
| ویژگی | Reactive Forms | Template-driven Forms |
|---|---|---|
| محل تعریف ساختار | کد TypeScript | قالب HTML |
| تستپذیری | بالا | پایینتر |
| مناسب برای | فرمهای پیچیده | فرمهای ساده |
کِی از Reactive Forms استفاده کنیم؟
وقتی فرم پیچیده است، نیاز به اعتبارسنجی دینامیک، تست واحد آسان یا واکنش به تغییرات مقادیر در زمان واقعی دارید.
کِی از Template-driven Forms استفاده کنیم؟
وقتی فرم ساده است (مثل یک فرم تماس کوتاه) و میخواهید سریع و با کد کم آن را در قالب HTML بنویسید.
مثال Reactive Forms
form = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email])
});
مثال Template-driven Forms
<form #f="ngForm">
<input name="email" ngModel required email />
</form>
اشتباه رایج
اشتباه رایج ترکیب نامنظم این دو رویکرد در یک فرم (بخشی Reactive و بخشی Template-driven) است که باعث سردرگمی در مدیریت وضعیت فرم میشود؛ باید در کل یک فرم فقط از یکی از این دو الگو استفاده کرد.
جمعبندی
برای فرمهای پیچیده و نیازمند تست از Reactive Forms و برای فرمهای ساده و سریع از Template-driven Forms استفاده کنید.