إنشاء راديو بناءً على Enum في Angular 2

في Angular 2، يُعتبر استخدام الراديو بأنواعها مثله مثل استخدام أي عنصر إدخال آخر، ولكن هناك بعض النقاط الخاصة التي يجب مراعاتها عند استخدام الراديو بالاشتراك مع نموذج البيانات. لنلق نظرة أعمق على الكود الذي قدمته، ونجري بعض التعديلات لتحقيق السلوك المطلوب.

أولاً وقبل كل شيء، يجب التأكد من تحديد قيمة افتراضية للخيار المُحدد، حيث أنه في بعض الحالات قد تكون القيمة undefined كما هو حالك الآن. يُفضل أن نقوم بتعيين قيمة افتراضية محددة من النوع الصحيح للخيارات المتاحة.

بالنسبة لكود HTML، فإنه يبدو سليمًا بشكل عام، حيث تقوم بتكرار الراديوهات لكل خيار في motifChoices باستخدام *ngFor. ولكن لنضيف قيمة محددة لخاصية value التي ستتمثل في القيمة المُختارة.

هناك تعديلات بسيطة يجب إجراؤها في الكود TypeScript لتحقيق السلوك المطلوب:

أولاً، يُفضل استخدام نوع محدد بدلاً من any لتعريف motifChoices. سنستخدم النوع المناسب للخيارات في هذه الحالة.

typescriptCopy code
enum 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 الخاص بك كالتالي:

htmlCopy code
<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>

ثم يجب أن نقوم بتحديد خاصية في الكلاس لتخزين القيمة المختارة:

typescriptCopy code
export class YourComponent {
    private motifChoices: Choice[] = [];
    private selectedMotif: MotifIntervention;

    constructor(private interService: InterventionService) {
        // تعبئة motifChoices هنا
    }
}

بهذا التعديل، سيتم الآن تعيين القيمة المحددة للراديو بشكل صحيح إلى الخاصية selectedMotif في الكلاس. ويمكنك استخدام هذه القيمة في أي مكان في الكود حيث تحتاج إلى استخدام القيمة المحددة.

باستكمال هذه الخطوات، يجب أن تتمكن الآن من إنشاء راديوهات من تعريف الـ Enum وربط القيم المختارة مع الخاصية بشكل صحيح.