Solution 1 :

Follow the docs.. if you are building on ionic, you should use ionic 4 components as much as possible.. They already have everything in the docs ion-radio-group & ion-radio.

Problem :

Here is the questionlist, which I get from API. I want to show the option in radio button select in Ionic 4. When I use *ngFor=“let key of ques; let i = index”, It shows the question number as {{i+1}}) {{key.question}}.I want to show the selected radio button value from option1, option2, option3, option4, option5 as answer1 for question1, answer2 for question2 Like this. How to solve this?

I have a situation to select one radio button from dynamically created radio buttons. I know it is possible with Radio group but still I am not able to do it because my situation is little different.

All data coming from the server in json form. I have created the view dynamically with one question and four options with radio buttons. But what i am understanding is every row is new row and I am not able to select only one radio buttons from all radio buttons. Every button is selecting individually but I want to select only one radio button on which I click.
Any help would be appreciated.


<ion-row style="padding:5px;" *ngFor="let key of ques; let i = index">
<ion-text>{{i+1}}) {{key.question}}</ion-text>
    <ion-item lines=none *ngIf="key.option1!==null">
     <input slot="start" type="radio" value="{{key.option1}}" [(ngModel)]="option1" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black;">{{key.option1}}</ion-text>

    <ion-item lines=none *ngIf="key.option2!==null">
     <input slot="start" type="radio" value="{{key.option2}}" [(ngModel)]="option2" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black;">{{key.option2}}</ion-text>

    <ion-item lines=none *ngIf="key.option3!==null">
      <input slot="start" type="radio" value="{{key.option3}}" [(ngModel)]="option3" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black; margin-left:2px;">{{key.option3}}</ion-text>

    <ion-item lines=none *ngIf="key.option4!==null">
      <input slot="start" type="radio" value="{{key.option4}}" [(ngModel)]="option4" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black; margin-left:2px;">{{key.option4}}</ion-text>

    <ion-item lines=none *ngIf="key.option5!==null">
      <input slot="start" type="radio" value="{{key.option5}}" [(ngModel)]="option5" required>&nbsp;&nbsp; 
      <ion-text style="font-size:12px; font: JosefinSans-Regular; color:black; margin-left:2px;">{{key.option5}}</ion-text>


    {"question":"Please note that information...?",
    {"question":"Have you ever had any of the following:",
    "option3":"Lung disease",
    "option4":"Heart Disease",
    "option5":"None of the Above"}


Comment posted by Mostafa Harb

You can do it in this way but need some edits, inside object of question, under options of question,add a property answer :”” in each question. And add on radio select bind its value to key.answer and at the end you can get the answer of each question from the answer attribute of each question.