Wrong behavior while checking radio buttons in a Loop (using Angular2) - angularjs

Question

I'm working on an Angular2 project & currently i'm stuck with a Quizz module, so illustrating the problem ; when a candidate wants to pass a test he will get that test with some questions ; every question has 4 propositions with radio buttons and he should answer merely by checking one of them for every question. here is the HTML snippet of what i'm talking about :
<div *ngFor="#qt of listQuestion">
<h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3>
<div class="uk-accordion-content">
<input type="radio" id="radio_demo_1" />
<label for="radio_demo_1"> <b>{{qt.lpo[0]}}</b></label> <br><br>
<input type="radio" id="radio_demo_2" />
<label for="radio_demo_2"><b>{{qt.lpo[1]}}</b></label><br><br>
<input type="radio" id="radio_demo_3" />
<label for="radio_demo_3"> <b>{{qt.lpo[2]}}</b></label> <br><br>
<input type="radio" id="radio_demo_4" />
<label for="radio_demo_4"><b>{{qt.lpo[3]}}</b></label>
</div> </div>
Where the listQuestion is a list of Question entities which each one of them has a wording and a list of propositions (lpo), in that way i cannot check only one radio button for every question as it is shown below :
I tried to remove the id in the <input> tags and it still the same problem , I've changed the id by name and give the same name for all tags thus, I could check only one proposition but when moving to another question and checking a new proposition , the first one will be cleared.
Any help Please ?

Answer 1

Your problem is that the way you currently do it, you have a single radio group for all questions. You can solve it by creating radio element name attributes dynamically. Something like this:
<h3 class="uk-accordion-title" >{{qt.id}}</h3>
<input type="radio" id="radio_demo_{{qt.id}}_{{index$}}" name="radio_demo_{{qt.id}}_{{index$}}" />
<label for="radio_demo_{{qt.id}}_{{index$}}"> <b>{{qt.lpo[0]}}</b></label> <br><br>
{{qt.id}} (or any other qt property that uniquely identifies the question) is the key here.
This way, you'll have a separate radio group for each question, because group names won't intersect.