0

I have a list of questions as given below.

  public questionList = [
    {
      question:{
        id: "Q1",
        query:"query 1"
      },
      options:[
        {
          id: "opt1",
          text: "Q1_opt1"
        },
        {
          id: "opt2",
          text: "Q1_opt2"
        }
      ],
      selected:{
        id:"",
        text:""
      }
    },

    {
      question:{
        id: "Q2",
        query:"query 2"
      },
      options:[
        {
          id: "opt1",
          text: "Q2_opt1"
        },
        {
          id: "opt2",
          text: "Q2_opt2"
        }
      ],
      selected:{
        id:"",
        text:""
      }
    }
  ];

My intention is to list the questions along with options as radio buttons. Whenever somebody selects an option, the id of the selected option should be assigned to "selected.id" which is associated with that question.

Following is the HTML part.

<div *ngFor="let question of questionList">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options">
      <input type="radio" value="{{option.id}}" [(ngModel)]="question.selected.id">{{option.text}}
      <br>
    </div>
    {{question.selected | json}}

    <br>
    <br>


</div>

But when i select the any option for the first question, option for the second question is also getting selected and vise versa.

enter image description here

what would have gone wrong here?

Renjith
  • 1,122
  • 1
  • 19
  • 45

3 Answers3

3

Assign name to the radio button

<div *ngFor="let question of questionList; let i = index">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options">
      <input type="radio" [name]= "i" value="{{option.id}}" [(ngModel)]="question.selected.id">{{option.text}}
      <br>
    </div>
    {{question.selected | json}}

    <br>
    <br>
</div>
Abhishek Ekaanth
  • 2,511
  • 2
  • 19
  • 40
2

You are missing name attribute on radio. The Name should be unique for one set of Options.

In your use case where radio buttons are genrated dynamically you can use index of loop to set name like this -

<div *ngFor="let question of questionList; let i = index">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options; let j = index">
      <input type="radio" [value]="option?.id" [(ngModel)]="question.selected.id" [name]='"abc"+i+j'>{{option.text}}
      <br>
    </div>
    {{question.selected | json}}
</div>

Working Example

Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215
  • thank you... that worked. one more question... is there any way i can assign the option itself to "selected" instead of option.id? – Renjith Jan 04 '19 at 09:29
  • i think ""abc"+i" is more than enough... my radio buttons are yes/no... i want only one to be selected at a time. – Renjith Jan 04 '19 at 09:31
  • yeah `"abc"+i"` should work. I didn't understand your next question, can you explain bit more? – Pardeep Jain Jan 04 '19 at 09:37
  • in real application "option" is more complicated than given here.. it has details like weightage... when i send the submitted answer to the backend server, i would like to append these details as well to the "selected". eg.. in this case you can see that the "text" field is missing in the "selected". how do i populate it?? any easy way from angular? – Renjith Jan 04 '19 at 09:42
0
In your array id is same thats why its selecting the option button of other array.

you can try this 

//HTMl code

<div *ngFor="let question of questionList">
    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options">
      <input type="radio" [value]="option" [(ngModel)]="question.selected">{{option.text}}
      <br>
    </div>
    {{question.selected | json}}

    <br>
    <br>


</div>
Ajay Barokar
  • 176
  • 2