Angular Academy · درس

المدققات غير المتزامنة

تحقّق من الصحة مقابل الخادم بشكل غير متزامن

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

التحقق الذي ينتظر

يحتاج بعض التحقق إلى خادم، مثل التحقق مما إذا كان اسم المستخدم مستخدمًا. تعيد أدوات التحقق غير المتزامنة Promise أو Observable تُحلّ إلى خريطة أخطاء أو null.

نوع AsyncValidatorFn

تأخذ أداة التحقق غير المتزامنة عنصر تحكم، وتعيد Observable<ValidationErrors | null> أو Promise.

const v: AsyncValidatorFn = (control) => {
  return checkAvailable(control.value);
};

إرجاع null يعني أن القيمة صالحة

أعيدوا null عندما تكون القيمة صالحة، أو كائن أخطاء مثل { taken: true } عندما تكون غير صالحة، تمامًا كما في أدوات التحقق المتزامنة.

أداة للتحقق من اسم المستخدم

تستدعي أداة التحقق هذه خدمةً ثم تحوّل النتيجة.

usernameValidator(api: UserApi): AsyncValidatorFn {
  return (control) =>
    api.isTaken(control.value).pipe(
      map(taken => taken ? { taken: true } : null)
    );
}

تسجيلها

توضع أدوات التحقق غير المتزامنة في الوسيطة الثالثة لعنصر التحكم، منفصلةً عن أدوات التحقق المتزامنة.

new FormControl('', {
  validators: [Validators.required],
  asyncValidators: [usernameValidator(api)]
});

حالة PENDING

أثناء تشغيل أداة التحقق غير المتزامنة، تكون حالة عنصر التحكم PENDING. استخدموها لعرض مؤشر انتظار.

@if (form.controls.username.pending) {
  <span>Checking...</span>
}

تأخير الطلبات

تُشغّل أدوات التحقق غير المتزامنة عند كل تغيير في القيمة. استخدموا Debounce لتجنّب إرهاق الخادم بالطلبات.

return timer(300).pipe(
  switchMap(() => api.isTaken(control.value)),
  map(taken => taken ? { taken: true } : null)
);

تلغي switchMap الاستدعاءات القديمة

يؤدي استخدام switchMap إلى إلغاء الطلب السابق الجاري عند تغيّر القيمة مجددًا، بحيث تكون النتيجة الأحدث وحدها مهمة.

استراتيجية updateOn

اضبطوا updateOn: 'blur' حتى لا يُنفّذ التحقق غير المتزامن إلا عندما يغادر المستخدم الحقل، مما يقلل عدد الطلبات.

new FormControl('', {
  asyncValidators: [usernameValidator(api)],
  updateOn: 'blur'
});

قراءة الخطأ

اعرضوا الخطأ بعد اكتمال التحقق، وبعد أن يصبح عنصر التحكم متسخًا أو تتم زيارته.

@if (form.controls.username.hasError('taken')) {
  <span>Username already taken</span>
}

أفضل الممارسات

استخدموا دائمًا Debounce، وألغوا الطلبات القديمة، واعرضوا مؤشرًا للحالة قيد الانتظار، وتعاملوا مع أخطاء الشبكة حتى لا يبقى النموذج عالقًا في حالة PENDING.

اختبار سريع

اختبروا مدى فهمكم لأدوات التحقق غير المتزامنة.

مراجعة

تعلّمتم أن AsyncValidatorFn تعيد Observable أو Promise من النوع ValidationErrors | null، وتُسجّل في الوسيطة الثالثة لعنصر التحكم، مما يضعه في حالة PENDING. استخدموا Debounce وswitchMap لإدارة استدعاءات الخادم.

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

هل درس «المدققات غير المتزامنة» مجاني؟

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

ماذا ستتعلم في «المدققات غير المتزامنة»؟

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

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

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

كم من الوقت يستغرق درس «المدققات غير المتزامنة»؟

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

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

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

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

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