العودة إلى الدورة

التحقق المدمج في النماذج التفاعلية (Required, MinLength)

مطور Angular الشامل: من الصفر إلى الاحتراف

47. التحقق المدمج في النماذج التفاعلية

في النماذج التفاعلية، أدوات التحقق (validators) هي دوال محددة ضمن فئة المكون ويتم تمريرها إلى مثيل FormControl عند إنشائه. يوفر Angular العديد من دوال التحقق القياسية في فئة Validators.

1. تطبيق أدوات التحقق المدمجة

يتم تمرير أدوات التحقق كوسيط ثانٍ (أو ثالث، إذا تم استخدام أدوات التحقق غير المتزامنة) إلى مُنشئ FormControl، عادةً كمصفوفة.

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

// ... داخل المُنشئ أو ngOnInit

this.loginForm = this.fb.group({ username: ['', [ Validators.required, // يجب ألا يكون فارغاً Validators.minLength(5), // يجب أن يحتوي على 5 أحرف على الأقل Validators.pattern(/[a-zA-Z0-9]+/) ]], password: ['', [Validators.required]] });

2. عرض أخطاء التحقق في القالب

نستخدم طريقة get() على FormGroup لاسترداد مثيل عنصر التحكم وفحص حالته ومفاتيح الأخطاء المحددة عبر خاصية errors.

html

Username is mandatory.

Min length is 5. Current: {{ usernameControl.errors['minlength'].actualLength }}

الاختلاف الرئيسي عن TDF: في النماذج التفاعلية، يتم الوصول إلى أخطاء التحقق عبر control.errors (كائن يربط مفاتيح الخطأ بقيمها)، والذي نتحقق منه باستخدام hasError()، أو معامل التنقل الآمن ?..