التحقق المخصص في نماذج Angular

تعلّموا كيفية تنفيذ Validators مخصصة لضمان التحقق القوي من صحة النماذج في تطبيقات Angular لديكم.

ما هو التحقق المخصص؟

تتيح لكم Validators المخصصة تعريف منطق التحقق الخاص بكم، بما يتجاوز Validators المضمّنة مثل required أو minlength.

إنشاء Validator مخصص

إن Validator المخصص عبارة عن دالة بسيطة تُعيد null إذا كانت القيمة صالحة، أو كائنًا إذا كانت غير صالحة:

function forbiddenNameValidator(control: AbstractControl): { [key: string]: any } | null {
  return control.value === 'admin' ? { 'forbiddenName': true } : null;
}

تطبيق Validator

طبّقوا Validator المخصص على عنصر التحكم في النموذج لديكم:

this.myForm = new FormGroup({
  username: new FormControl('', [forbiddenNameValidator])
});

عرض أخطاء التحقق

اعرضوا رسائل الخطأ بشكل مشروط في القالب استنادًا إلى حالة التحقق:

<div *ngIf="myForm.get('username').hasError('forbiddenName')">
  Username 'admin' is not allowed.
</div>

استخدام توجيهات Validator

يمكن أيضًا استخدام Validators مباشرةً كتوجيهات في النماذج المعتمدة على القوالب:

<input name="username" ngModel forbiddenName>

Validators غير متزامنة

تتيح لكم Validators غير المتزامنة إجراء عمليات تحقق تتضمن عمليات غير متزامنة، مثل الفحوصات على الخادم:

username: new FormControl('', null, [asyncValidator])

اختبار Validators المخصصة

اختبروا Validators دائمًا للتأكد من عملها بشكل صحيح في السيناريوهات المختلفة والحالات الحدّية.

الملخص

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