44. نماذج القوالب (TDF): الوصول إلى حالة النموذج وتقديمه

توجيه NgForm، الذي يتم إنشاء مثيل له تلقائياً على وسم <form>، يجمع حالات جميع عناصر التحكم الموجودة بداخله.

الوصول إلى حالة النموذج العامة

من خلال تعيين متغير إشارة للنموذج نفسه (على سبيل المثال، #f="ngForm")، يمكننا الوصول إلى حالة النموذج العامة، وهي تجميع لحالات جميع عناصر التحكم.

html

Form Value: {{ f.value | json }}

حدث ngSubmit

يتسبب حدث DOM القياسي submit في إعادة تحميل الصفحة بالكامل. يمنع Angular هذا السلوك الافتراضي عند استخدامك لـ (ngSubmit) على عنصر <form>.

التعامل مع الإرسال

في TDF، أفضل ممارسة للإرسال هي تمرير كائن NgForm بأكمله إلى أسلوب المكون.

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

export class SubmissionComponent { userModel = { firstName: 'John', lastName: 'Doe' };

onSubmit(form: NgForm) { if (form.valid) { console.log('Data to send:', form.value); // استخدام form.value

  // بعد الإرسال الناجح، قد ترغب في إعادة تعيين النموذج
  form.resetForm(); 
  // إذا كنت تريد الاحتفاظ بنموذج البيانات ولكن إعادة تعيين الحالة:
  // form.resetForm(this.userModel);
}

} }

يحتوي form.value على الكائن المجمع (مفتاح-قيمة) لجميع المدخلات التي تم تحديد [(ngModel)] لها. يقوم form.resetForm() بإعادة تعيين حالات pristine و touched والتحقق من الصحة.