في Angular 2، يُعتبر استخدام الراديو بأنواعها مثله مثل استخدام أي عنصر إدخال آخر، ولكن هناك بعض النقاط الخاصة التي يجب مراعاتها عند استخدام الراديو بالاشتراك مع نموذج البيانات. لنلق نظرة أعمق على الكود الذي قدمته، ونجري بعض التعديلات لتحقيق السلوك المطلوب.
أولاً وقبل كل شيء، يجب التأكد من تحديد قيمة افتراضية للخيار المُحدد، حيث أنه في بعض الحالات قد تكون القيمة undefined
كما هو حالك الآن. يُفضل أن نقوم بتعيين قيمة افتراضية محددة من النوع الصحيح للخيارات المتاحة.
بالنسبة لكود HTML، فإنه يبدو سليمًا بشكل عام، حيث تقوم بتكرار الراديوهات لكل خيار في motifChoices
باستخدام *ngFor
. ولكن لنضيف قيمة محددة لخاصية value
التي ستتمثل في القيمة المُختارة.
هناك تعديلات بسيطة يجب إجراؤها في الكود TypeScript لتحقيق السلوك المطلوب:
أولاً، يُفضل استخدام نوع محدد بدلاً من any
لتعريف motifChoices
. سنستخدم النوع المناسب للخيارات في هذه الحالة.
typescriptenum MotifIntervention {
// قائمة القيم الممكنة للتعريف
}
interface Choice {
motif: string;
value: MotifIntervention; // يجب تحديد النوع بشكل دقيق
}
export class YourComponent {
private motifChoices: Choice[] = [];
constructor(private interService: InterventionService) {
this.motifChoices = Object.keys(MotifIntervention)
.filter(key => !isNaN(Number(key)))
.map(key => ({ motif: MotifIntervention[key], value: MotifIntervention[key] }));
}
}
في الكود أعلاه، قمنا بتعريف نوع Choice
لتحديد الهيكل المطلوب لكل خيار في motifChoices
. ونقوم بتحديد النوع بشكل صحيح للقيمة value
لتتماشى مع نوع الثابت MotifIntervention
.
بعد ذلك، يجب أن نحدد قيمة مبدئية للراديو المُختار في كل خيار. يمكننا القيام بذلك عبر تحديد قيمة افتراضية للخيارات في المصفوفة motifChoices
.
باستكمال الخطوات المذكورة أعلاه، ستكون قادرًا على تحقيق السلوك المطلوب، حيث يُقترن كل راديو بقيمة ثابتة محددة من MotifIntervention
ويتم ربط القيمة المختارة مع خاصية value
بشكل صحيح.
المزيد من المعلومات
بعد أن قمنا بتحديد الهيكل المناسب لخيارات الراديو وتحديد قيم افتراضية لكل خيار، يجب الآن التأكد من تعيين القيمة المُختارة بشكل صحيح إلى الخاصية المرتبطة بها. في الحالة الحالية، يبدو أن هناك مشكلة في طريقة ربط القيمة المختارة مع الخاصية value
.
في الكود HTML الذي قمت بتقديمه، لاحظنا أنك تستخدم [(ngModel)]="choice.value"
لربط القيمة المختارة مع الخاصية value
في كل خيار. ومع ذلك، يبدو أن هناك بعض الاضطرابات في هذا الربط.
يجب التأكد من استخدام القيمة الصحيحة للربط مع القيمة المختارة في النموذج. في حالتنا، نريد ربط قيمة معينة من MotifIntervention
مع القيمة المختارة، وليس مجرد قيمة بوليانية.
لذا، يجب أن نقوم بإجراء تعديل بسيط في الربط لضمان استخدام القيمة المناسبة. يُفضل استخدام قيمة الـ motif
بدلاً من value
للربط، حيث تحتوي motif
على قيمة محددة من MotifIntervention
.
لذلك، سيصبح كود HTML الخاص بك كالتالي:
html<div class="from_elem">
<label>Motiflabel><br>
<div *ngFor="let choice of motifChoices">
<input type="radio" name="motif" [(ngModel)]="selectedMotif" [value]="choice.motif"/>{{choice.motif}}<br>
div>
div>
ثم يجب أن نقوم بتحديد خاصية في الكلاس لتخزين القيمة المختارة:
typescriptexport class YourComponent {
private motifChoices: Choice[] = [];
private selectedMotif: MotifIntervention;
constructor(private interService: InterventionService) {
// تعبئة motifChoices هنا
}
}
بهذا التعديل، سيتم الآن تعيين القيمة المحددة للراديو بشكل صحيح إلى الخاصية selectedMotif
في الكلاس. ويمكنك استخدام هذه القيمة في أي مكان في الكود حيث تحتاج إلى استخدام القيمة المحددة.
باستكمال هذه الخطوات، يجب أن تتمكن الآن من إنشاء راديوهات من تعريف الـ Enum وربط القيم المختارة مع الخاصية بشكل صحيح.