42. إعداد نماذج القوالب (TDF)

تعتمد النماذج الموجهة بالقوالب بشكل كبير على التوجيهات الموضوعة مباشرة في قالب HTML لاستنتاج نموذج النموذج (form model). هذا النهج سريع وسهل للنماذج البسيطة.

التوجيهات الرئيسية في TDF

1. NgForm: يُطبق تلقائياً على وسم <form>. يدير هيكل النموذج بالكامل وحالته.
2. ngModel: ينشئ تلقائياً مثيلاً لـ FormControl لعنصر الإدخال ويربطه بخاصية مكون باستخدام الربط ثنائي الاتجاه [(ngModel)].

إنشاء TDF خطوة بخطوة

1. تأكد من استيراد FormsModule (انظر الدرس السابق).

2. تحديد النموذج في القالب

نستخدم متغير الإشارة إلى القالب (#f) للوصول إلى مثيل توجيه NgForm، مما يسمح لنا بفحص حالة النموذج.

html

<p *ngIf="usernameCtrl.invalid && usernameCtrl.touched" class="error-message">
  Username is required.
</p>

3. التعامل مع الإرسال في المكون

typescript import { NgForm } from '@angular/forms';

export class TdfComponent { user = { username: '', email: '' };

onSubmit(form: NgForm) { if (form.valid) { console.log('Form Submitted!', this.user); // إرسال بيانات this.user إلى الخدمة } else { console.error('Form is invalid.'); } } }

في TDF، يحمل المكون نموذج البيانات (user) فقط، بينما يدير القالب عناصر التحكم وحالة التحقق من الصحة.