CODEWITHSUNDEEP
ionic2
raju
raju

Reputation: 6936

Getting selected radio button value, on (ionChange) in radio-group , ionic2

I want to get the selected radio button value, on (ionChange) event in radio-group in Ionic2.

My Html code is

<ion-list radio-group *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer(i)">
  <ion-list-header>
    {{question.questionText}}
  </ion-list-header>

  <ion-item>
    <ion-label>{{question.optionA}}</ion-label>
    <ion-radio  value="1"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionB}}</ion-label>
    <ion-radio  value="2"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionC}}</ion-label>
    <ion-radio  value="3"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionD}}</ion-label>
    <ion-radio  value="4"></ion-radio>
  </ion-item>
</ion-list>

How can I get ion-radio value in mcqQuesiton() on (ion-change).

I have number or radio-groups on a single page, as it is a multiple choice question page.

Upvotes: 18

Views: 40693

Answers (5)

Habeeb
Habeeb

Reputation: 352

ionic v6: use ngmodel

<ion-radio-group  [(ngModel)]="McAns" *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer($event)">
  <ion-list-header>
    {{question.questionText}}
  </ion-list-header>

  <ion-item>
    <ion-label>{{question.optionA}}</ion-label>
    <ion-radio  value="1"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionB}}</ion-label>
    <ion-radio  value="2"></ion-radio>
  </ion-item>
</ion-radio-group>

on (ionChange)="mcqAnswer($event)"

 mcqAnswer(eve) {
    console.log(this.McAns)
  }

Upvotes: 1

divya
divya

Reputation: 1

there are 2 ways .one is to use ionSelect.below is an example 

  <ion-item >
    <ion-label><h2>You entered:</h2>
    </ion-label>
    <ion-radio color="success"  slot="start" [value]="enteredAddress" (ionSelect)="populateSuggestion($event)"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label><h2>Suggested Address:</h2>
    </ion-label>
    <ion-radio  color="success" slot="start" [value]="suggestedAddress" (ionSelect)="populateSuggestion($event)" ></ion-radio>
  </ion-item>

</ion-radio-group>

way 2 is use access the native DOM element using ViewChild. html: ts: @ViewChild('radio', { read: ElementRef, static: false }) radio: ElementRef;

Upvotes: 0

Pratik_Jain499
Pratik_Jain499

Reputation: 11

Choose Category 

   <ion-item *ngFor="let category of subcategories; let index=index;">
      <ion-label>{{category}}</ion-label>
      <ion-radio [value]="category"></ion-radio>
    </ion-item>

In your .ts file:

selectedValue($event){
  console.log($event);
}

Upvotes: -1

AwesomeGeek
AwesomeGeek

Reputation: 319

You can use ionSelect event of <ion-radio> to pass the value.

...
  <ion-item>
    <ion-label>{{question.optionA}}</ion-label>
    <ion-radio  value="1" (ionSelect)="mcqAnswer(i,1)"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>{{question.optionB}}</ion-label>
    <ion-radio  value="2" (ionSelect)="mcqAnswer(i,2)"></ion-radio>
  </ion-item>
...

In your typescript (.ts) file it will be something like

mcqAnswer(questionID,answer){
...
}

Upvotes: 12

TomS
TomS

Reputation: 681

You can pass through $event to your onChange method. E.g.

In your html:

<ion-list radio-group *ngFor="let question of mcqData; let i= index;" (ionChange)="mcqAnswer($event)">
  <ion-list-header>
    {{question.questionText}}
  </ion-list-header>

  <ion-item>
    <ion-label>{{question.optionA}}</ion-label>
    <ion-radio  value="1"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionB}}</ion-label>
    <ion-radio  value="2"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionC}}</ion-label>
    <ion-radio  value="3"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>{{question.optionD}}</ion-label>
    <ion-radio  value="4"></ion-radio>
  </ion-item>
</ion-list>

In your Typescript:

function mcqAnswer(value)
{
   console.log(value);
}

Upvotes: 11

Related Questions