النماذج التفاعلية ذات الأنواع
أنشئ نماذج باستخدام كتابة صارمة للأنواع
النماذج التفاعلية ذات الأنواع درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
لماذا النماذج ذات الأنواع؟
قبل Angular 14، كانت قيم النماذج التفاعلية تُكتب على أنها any. أما النماذج التفاعلية ذات الأنواع فتوفّر أمانًا كاملًا للأنواع؛ إذ يعرف المصرّف بنية قيمة النموذج وأسماء عناصر التحكم.
FormControl ذو نوع
إن FormControl نوع عام. حدّدوا نوع القيمة حتى يتحقق النظام من عمليات القراءة والكتابة.
const name = new FormControl<string>('', {
nonNullable: true
});FormGroup ذو نوع
يستنتج FormGroup نوع قيمته من عناصر التحكم التي تمرّرونها إليه.
const form = new FormGroup({
email: new FormControl(''),
age: new FormControl(0)
});نوع القيمة المستنتج
تكون قيمة value للمجموعة أعلاه من النوع { email: string | null; age: number | null }، ويتحقق المصرّف منها بالكامل أثناء الترجمة.
const v = form.value; // typed automaticallyقابلية القيمة لأن تكون null
يمكن افتراضيًا إعادة تعيين عناصر التحكم إلى null، ولذلك يتضمن نوع قيمتها | null. استخدموا nonNullable لاستبعاد null.
new FormControl('', { nonNullable: true });
// value type: string (no null)الوصول الآمن إلى عناصر التحكم
يكون form.controls.email محدد النوع بقوة، لذلك يكتشف المصرّف الأخطاء الإملائية في أسماء عناصر التحكم.
form.controls.email.setValue('a@b.com');get في مقابل controls
فضّلوا form.controls.name على form.get('name') لضمان أمان الأنواع؛ إذ تعيد get قيمة من النوع الفضفاض AbstractControl | null.
getRawValue
تعيد getRawValue() جميع القيم، بما فيها عناصر التحكم المعطّلة، بخلاف value التي تستبعد العناصر المعطّلة.
const all = form.getRawValue();المجموعات المتداخلة
يمكن تركيب المجموعات ذات الأنواع. وتضيف FormGroup المتداخلة بنيتها ذات النوع إلى قيمة المجموعة الأصلية.
const form = new FormGroup({
user: new FormGroup({
first: new FormControl(''),
last: new FormControl('')
})
});أمان الأنواع في patchValue
تقبل patchValue جزءًا من قيمة النموذج؛ ويضع المصرّف علامات على المفاتيح غير المعروفة.
form.patchValue({ email: 'x@y.com' });ترحيل النماذج القديمة
تتوفّر واجهات برمجة غير محددة النوع، مثل UntypedFormGroup، للترحيل التدريجي. وينبغي أن تستخدم الشفرة الجديدة الأصناف ذات الأنواع لضمان الأمان.
اختبار سريع
اختبروا مدى فهمكم للنماذج التفاعلية ذات الأنواع.
مراجعة
تعلّمتم أن النماذج التفاعلية ذات الأنواع تجعل FormControl/FormGroup نوعًا عامًا، فتستنتج بنية قيمة يتم التحقق منها، وأن القيم الافتراضية تتضمن | null ويمكن تجنّب ذلك باستخدام nonNullable، وأن الوصول عبر controls أكثر أمانًا من get.
الأسئلة الشائعة
هل درس «النماذج التفاعلية ذات الأنواع» مجاني؟
نعم — نص درس «النماذج التفاعلية ذات الأنواع» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «النماذج التفاعلية ذات الأنواع»؟
أنشئ نماذج باستخدام كتابة صارمة للأنواع تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «النماذج التفاعلية ذات الأنواع»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- النماذج التفاعلية ذات الأنواع
- FormArray والحقول الديناميكية
- المدققات غير المتزامنة
- أنماط FormBuilder