النماذج التفاعلية في Angular

ستتعلمون في هذا الدرس النماذج التفاعلية، التي تتعامل مع سيناريوهات النماذج المعقدة في تطبيقات Angular.

ما هي النماذج التفاعلية؟

تستخدم النماذج التفاعلية أسلوبًا برمجيًا لإنشاء النماذج وإدارتها، مما يوفر مرونة وقدرات أكبر للتحقق من الصحة.

استيراد ReactiveFormsModule

لاستخدام النماذج التفاعلية، استوردوا ReactiveFormsModule في وحدتكم:

import { ReactiveFormsModule } from '@angular/forms';

إنشاء FormGroup

عرّفوا مجموعة نماذج في فئة المكوّن لديكم:

this.myForm = new FormGroup({
  name: new FormControl('')
});

ربط النموذج بالقالب

استخدموا التوجيه formGroup في القالب لربط مجموعة النماذج الخاصة بكم:

<form [formGroup]="myForm">
  <input formControlName="name">
</form>

التحقق من صحة النموذج

يمكن إضافة Validators بسهولة إلى النماذج التفاعلية لضمان صحة المدخلات:

name: new FormControl('', Validators.required)

التعامل مع إرسال النموذج

تعاملوا مع إرسال النماذج من خلال الاشتراك في أحداث الإرسال داخل فئة المكوّن لديكم:

onSubmit() {
  console.log(this.myForm.value);
}

استخدام FormBuilder

تعمل خدمة FormBuilder على تبسيط إنشاء النماذج:

this.myForm = this.fb.group({
  name: ['', Validators.required]
});

الملخص

أصبحتم تعرفون الآن كيفية إنشاء النماذج التفاعلية، والتعامل مع عمليات التحقق، وإدارة حالة النموذج بفعالية. أحسنتم!