Angular Academy · درس

معالجة حالتي التعطيل واللمس

اعكس حالة النموذج في عنصر التحكم لديك

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

ما بعد القيمة

يحترم عنصر التحكم المخصّص الكامل مفهومين إضافيين في النماذج: حالة التعطيل وحالة التفاعل. وهما يؤثران في تجربة المستخدم وطريقة عرض التحقق.

setDisabledState

تستدعي Angular الدالة setDisabledState عند تعطيل عنصر النموذج أو تمكينه (مثلًا من خلال control.disable()). اعكس هذه الحالة في المكوّن.

disabled = false;

setDisabledState(isDisabled: boolean): void {
  this.disabled = isDisabled;
}

عكس حالة التعطيل في العرض

استخدم الراية disabled لتنسيق عنصر التحكم ومنع التفاعل معه، حتى لا يتمكن المستخدمون من تغيير حقل معطّل.

template: '<button [disabled]="disabled" (click)="select(s)">star</button>'

حماية معالجات الأحداث

احرص أيضًا على حماية معالجات التغيير، بحيث لا تؤدي التفاعلات البرمجية أو تفاعلات لوحة المفاتيح إلى أي إجراء أثناء التعطيل.

select(rating: number): void {
  if (this.disabled) return;
  this.value = rating;
  this.onChange(rating);
}

registerOnTouched

تمرّر Angular استدعاءً لتحديد أن عنصر التحكم قد تم التفاعل معه. احفظه كما حفظت onChange.

private onTouched: () => void = () => {};

registerOnTouched(fn: () => void): void {
  this.onTouched = fn;
}

استدعاء onTouched

استدعِ استدعاء التفاعل عندما يغادر المستخدم عنصر التحكم، وعادةً عند فقدان التركيز. يخبر ذلك Angular بأن المستخدم تفاعل مع العنصر، مما يتيح عرض رسائل التحقق المعتمدة على حالة التفاعل.

onBlur(): void {
  this.onTouched();
}

أهمية حالة التفاعل

غالبًا ما تعرض تجربة التحقق الأخطاء بعد التفاعل مع الحقل فقط. ومن دون استدعاء onTouched، تظل control.touched بالقيمة false، وقد لا تظهر رسائل الخطأ في الوقت المناسب.

<small *ngIf="control.touched && control.invalid">Required</small>

ربط حدث فقدان التركيز

أضف معالج فقدان التركيز إلى القالب، حتى يؤدي مغادرة عنصر التحكم إلى تحديد أنه تم التفاعل معه.

template: '<div (blur)="onBlur()" tabindex="0">...</div>'

نمط التعطيل التفاعلي

يُفضّل التعطيل من خلال واجهة برمجة النماذج (control.disable()) بدلًا من ربط disabled في القالب، حتى تتحكم Angular في setDisabledState بطريقة متسقة.

this.form.get('stars')?.disable();

إمكانية الوصول

اعكس حالتي التعطيل والتركيز بطريقة تدعم إمكانية الوصول: عيّن aria-disabled، وأدر tabindex، وتأكد من أن مستخدمي لوحة المفاتيح يستطيعون فقدان التركيز لتفعيل حالة التفاعل، وبذلك يبقى عنصر التحكم شاملًا للجميع.

تكامل كامل الآن

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

تحقق سريع

اختبر معرفتك بالتعطيل والتفاعل.

مراجعة

تعاملت مع setDisabledState (لعكس حالة التعطيل والحماية منها) ومع registerOnTouched (للاستدعاء عند فقدان التركيز وتحديد حالة التفاعل، مما يتيح تجربة التحقق). ويُفضّل استخدام واجهة برمجة النماذج للتحكم في حالة التعطيل، مع الحفاظ على إمكانية الوصول إلى عنصر التحكم.

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

هل درس «معالجة حالتي التعطيل واللمس» مجاني؟

نعم — نص درس «معالجة حالتي التعطيل واللمس» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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