Angular Academy · درس

التحقق من صحة عناصر التحكم المخصصة

وفّر مدققات من عناصر التحكم المخصصة

التحقق من صحة عناصر التحكم المخصصة درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

عناصر تحكم تتحقق من صحتها ذاتيًا

يمكن لعنصر التحكم المخصّص أن يتضمن منطق التحقق الخاص به من خلال تنفيذ الواجهة Validator والتسجيل باستخدام NG_VALIDATORS، بحيث يحصل المستهلكون على حالة الصلاحية تلقائيًا.

واجهة Validator

تتطلب Validator أسلوبًا باسم validate يعيد ValidationErrors (خريطة أخطاء) أو null عندما تكون القيمة صالحة.

import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';

export class RatingComponent implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return control.value > 0 ? null : { required: true };
  }
}

تسجيل NG_VALIDATORS

أضف موفّرًا متعددًا ثانيًا لـ NG_VALIDATORS إلى جانب NG_VALUE_ACCESSOR، مستخدمًا forwardRef مرة أخرى.

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

providers: [
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]

إرجاع خرائط الأخطاء

تصبح مفاتيح خريطة الأخطاء إدخالات في control.errors. استخدم مفاتيح وصفية وبيانات اختيارية حتى تتمكن القوالب من عرض رسائل محددة.

validate(control: AbstractControl): ValidationErrors | null {
  const v = control.value;
  if (v == null) return { required: true };
  if (v < this.min) return { min: { required: this.min, actual: v } };
  return null;
}

استخدام الأخطاء

تقرأ القوالب control.errors كما تفعل مع أدوات التحقق المضمّنة، فتعرض الرسائل عندما يكون عنصر التحكم غير صالح وتم التفاعل معه.

<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>

الدمج مع أدوات التحقق الخارجية

تعمل أدوات التحقق الموجودة في عنصر التحكم وتلك التي يمررها المستهلك (في النموذج التفاعلي) معًا، ثم تُدمج نتائجهما. وتضيف قواعد عنصر التحكم لديك إلى قواعد النموذج بدلًا من استبدالها.

stars: [0, [Validators.required]] // plus the control's own validate()

التحقق الديناميكي

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

private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }

@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }

التحقق غير المتزامن

لإجراء فحوصات على الخادم، نفّذ AsyncValidator مع validate يعيد Observable أو Promise من الأخطاء، وسجّله باستخدام NG_ASYNC_VALIDATORS.

validate(control: AbstractControl): Observable<ValidationErrors | null> {
  return this.api.isUnique(control.value).pipe(
    map(ok => ok ? null : { taken: true })
  );
}

حافظ على التركيز

ضع داخل عنصر التحكم فقط التحقق الملازم له (مثلًا: يجب أن يكون التقييم أكبر من الصفر). واترك القواعد الخاصة بمنطق العمل للنموذج المستهلك للحفاظ على قابلية إعادة الاستخدام.

اختبار التحقق

اختبر validate مباشرةً على مستوى الوحدة، وذلك بتمرير عنصر تحكم وهمي ذي قيمة، ثم التحقق من خريطة الأخطاء المُعادة أو من القيمة null.

it('requires a rating', () => {
  const c = new FormControl(0);
  expect(component.validate(c)).toEqual({ required: true });
});

عنصر تحكم مخصّص كامل

بعد تنفيذ موفّر القيمة والتعطيل والتفاعل والتحقق، يصبح المكوّن عنصر تحكم كاملًا وقابلًا لإعادة الاستخدام في النماذج، ولا يميّزه المستهلكون عن حقول الإدخال الأصلية.

تحقق سريع

اختبر معرفتك بالتحقق.

مراجعة

أضفت التحقق من خلال تنفيذ Validator.validate وتسجيل NG_VALIDATORS وإرجاع خرائط الأخطاء، كما دعمت إعادة التحقق الديناميكية عبر registerOnValidatorChange، واستخدمت اختياريًا AsyncValidator مع NG_ASYNC_VALIDATORS لإنشاء عنصر تحكم مخصّص متكامل.

الأسئلة الشائعة

هل درس «التحقق من صحة عناصر التحكم المخصصة» مجاني؟

نعم — نص درس «التحقق من صحة عناصر التحكم المخصصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «التحقق من صحة عناصر التحكم المخصصة»؟

وفّر مدققات من عناصر التحكم المخصصة تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «التحقق من صحة عناصر التحكم المخصصة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy