النماذج المعتمدة على القوالب

يقدّم لكم هذا الدرس النماذج المعتمدة على القوالب في Angular، مما يتيح لكم إنشاء نماذج بسيطة بسرعة.

ما هي النماذج المعتمدة على القوالب؟

تستخدم النماذج المعتمدة على القوالب قوالب HTML وتوجيهات Angular للتعامل بسهولة مع إنشاء النماذج والتحقق من صحتها وإرسالها.

استيراد FormsModule

لاستخدام النماذج المعتمدة على القوالب، استوردوا FormsModule إلى وحدة Angular لديكم:

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

إنشاء نموذج بسيط

عرّفوا نموذجًا بسيطًا في القالب باستخدام التوجيه ngForm:

<form #form="ngForm">
  <input name="username" ngModel>
</form>

الربط ثنائي الاتجاه باستخدام ngModel

يربط ngModel عناصر التحكم في النموذج بخصائص المكوّن باستخدام ربط البيانات ثنائي الاتجاه:

<input [(ngModel)]="user.name" name="username">

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

تعاملوا بسهولة مع إرسال النموذج باستخدام ربط الأحداث في Angular:

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

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

يوفّر Angular توجيهات سهلة للتحقق مثل required وminlength:

<input name="username" ngModel required minlength="4">

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

يمكنكم الوصول إلى حالة النموذج، مثل الصلاحية أو حالة التفاعل، من خلال متغيرات القالب:

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

الملخص

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