How to get the value of the selected ion radio button after submission using angular

Issue

.html

<ion-radio-group 
    *ngFor"let option of data" 
    (ionChange)"checkValue($event)" 
    [value]"item">
   <ion-item>
       <ion-label>{{option.optionA}}</ion-label>
       <ion-radio slot"start" value"Not"></ion-radio>
   </ion-item>   
   <ion-item>
       <ion-label>{{option.optionB}}</ion-label>
       <ion-radio slot"start"  value"Some"></ion-radio>
   </ion-item>
   <ion-item>
       <ion-label>{{option.optionC}}</ion-label>
       <ion-radio slot"start" value"Most"></ion-radio>
   </ion-item>
   <ion-item>
       <ion-label>{{option.optionD}}</ion-label>
       <ion-radio slot"start" value"All"></ion-radio>
   </ion-item>
</ion-radio-group>

<div class"evalbtn">
    <button (click)"print(event)" class"nextbtn" (click)"evaluation2()">
        Submit
    </button>
</div>

.ts

data: any[]  [
  {
    "optionA":"Not at All",
    "optionB":"For some of the Time",
    "optionC":"For most of the Time",
    "optionD":"For all of the Time",      
  }
];

//function to print what is inputed in the form that is declared above
checkValue(event) { 
    console.log(event.detail.value)
}

print(event) {
    console.log(this.checkValue(event))
}

Solution

Add [(ngModel)] instead of [value] for ion-radio-group.

<ion-radio-group *ngFor"let option of data"
    [(ngModel)]"selectedValue"
    (ionChange)"checkValue($event)">
<!-- items -->
</ion-radio-group>

And add selectedValue to your component:

selectedValue: any;

print(event) {
    console.log('Selected value: ', this.selectedValue);
}

Answered By – Danil Prokhorenko