2

I`m writing a component that query from database Test (like school test) and create list of task that are tied to it in the base. Derivation of questions works fine but, when I select one of radio button in one group and then select in another group, my first choice resets:

enter image description here

I need to select one radio button in every group (like in test in school), what is the problem and what can I do?

code:

performingTestForm.html:

<template>
<lightning-combobox
        name="progress"
        label="Status"
        value={value}
        placeholder="Select Progress"
        onchange={handleChange} >
</lightning-combobox>
<div class="slds-p-top_medium "><button class="slds-button slds-button_brand slds-align_absolute-center" onclick={startTest}>Start test</button></div>
<template for:each={tasks} for:item='task'>
    <div key={task.Id}>
        <lightning-radio-group name="task.Task_question__c"
                               data-id={task.Id}
                               label={task.Task_question__c}
                                required
                               type="radio">
        </lightning-radio-group>
    </div>
</template>

performingTestForm.js:

    import { LightningElement, track } from 'lwc';
import getAllTests from '@salesforce/apex/performingTestsController.getAllTests';
import getTestsTitle from '@salesforce/apex/performingTestsController.getTestTitles';
import getTest from '@salesforce/apex/performingTestsController.getTest';
import TaskSubtype from '@salesforce/schema/Task.TaskSubtype';
export default class PerformingTestsForm extends LightningElement {
    value = '';
    option = [];
    @track tasks = [];
    @track currentQuestion;

    async connectedCallback()
    {
        let titles = await getTestsTitle();
        for (let i = 0; i < titles.length; i++) {
            let tempObj = { label: titles[i].Test_title__c, value: titles[i].Id};
            this.option.push(tempObj);
        }
        console.log(this.option);
        this.template.querySelector("lightning-combobox").options = this.option;
    }

    shuffle(a) {
        var j, x, i;
        for (i = a.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            x = a[i];
            a[i] = a[j];
            a[j] = x;
        }
        return a;
    }

    async startTest(){
        let currentTestId = this.template.querySelector("lightning-combobox").value;
        this.currentQuestion = await getTest({testId: currentTestId});
        this.tasks = this.currentQuestion.Tasks__r;
        this.shuffle(this.tasks);
        console.log(this.tasks);
        setTimeout(() => {
            let tempArray = [1];
            let tempRadio;
            for(let i = 0; i < this.tasks.length; i++)
            {
                tempArray = [];
                tempArray.push({label: this.tasks[i].Var1__c, value: this.tasks[i].Var1__c});
                tempArray.push({label: this.tasks[i].Var2__c, value: this.tasks[i].Var2__c});
                tempArray.push({label: this.tasks[i].Var3__c, value: this.tasks[i].Var3__c});
                this.template.querySelector('[data-id="' + this.tasks[i].Id + '"]').options = tempArray;
            }
        }, 500)
    }

    handleChange(event) {
        this.value = event.detail.value;
    }
}

I do not suggest apex class because it works fine.

5

Radio buttons are checked based on the uniqueness of the name attribute. Set different names for each section and you'll be fine.

For example like this

<div key={task.Id}>
        <lightning-radio-group name="{task.Id}"
                               data-id={task.Id}
                               label={task.Task_question__c}
                                required
                               type="radio">
        </lightning-radio-group>
    </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.