Ionic 3: How to get only selected value from RadioButton? - ionic-framework

Question

I've multiple radio button in a list and I want to get only the value of selected radio button but I'm getting the value of clicked events.
Like if I click option 1 (10 times) and then select option 2 (1 time) I am getting the value like
[Option 1, Option 1,Option 1....x10time, Option 2]
How can I do this?
Below is my code.
my HTML,
<ion-list radio-group [(ngModel)]="sizeDetails">
<ion-list-header>
Select Your Preference
</ion-list-header>
<ion-item no-lines *ngFor="let list of prices_details; let i = index;">
<ion-label text-wrap style="font-size:12px; color:black;">
{{list.size}}
</ion-label>
<ion-label fixed text-right style="font-size:12px; color:black;">
{{list.discounted_price_pretty}}
</ion-label>
<ion-radio item-left color="secondary" value="{{list.size}}, {{list.discounted_price_pretty}}"
(ionSelect)="selectSize(list.size ,list.discounted_price_pretty, $event)">
</ion-radio>
my.ts code,
selectSize(size, discounted_price_pretty, event) {
if (event.checked) {
this.selectedSize.push(size);
this.selectedSizePrice.push(discounted_price_pretty);
}
else {
let sizeindex = this.removeCheckedFromSize(size);
this.selectedSize.splice(sizeindex, 1);
let sizeprice = this.removeCheckedFromSizePrice(discounted_price_pretty);
this.selectedSizePrice.splice(sizeprice, 1);
}
}
//Removes checkbox from array when user uncheck it
removeCheckedFromSize(size: String) {
return this.selectedSize.findIndex((sizeType) => {
return sizeType === size;
})
}
//Removes checkbox from array when you uncheck it
removeCheckedFromSizePrice(discounted_price_pretty: String) {
return this.selectedSizePrice.findIndex((sizeprice) => {
return sizeprice === discounted_price_pretty;
})
}

Answer 1

First of all, I don't think selectSize as a function needs to be that big. I would suggest you apply the Single Responsibility Principle when writing your code.
Second, in the case where this is a form, I would recommend you use Form Groups. However, if you choose to stick with your approach, which is absolutely fine, you might want your code to simply get the $event value upon submission.
The event parameter in your TS file's function will return the value parameter from the ion-radio HTML element.

Answer 2

Try this, this is my code for dynamic item review and it is working fine so use it as per your requirement.
<span *ngFor="let item of list_launches">
<ion-row radio-group [(ngModel)]="item.review" (ionChange)="itemReview(item.review,item.item)">
<ion-col col-4 text-wrap>
<ion-item no-padding>
{{item.item}}
</ion-item>
</ion-col>
<ion-col class="rate">
<ion-item no-padding>
<ion-radio [value]="item.value1"></ion-radio>
</ion-item>
</ion-col>
<ion-col class="rate">
<ion-item no-padding>
<ion-radio [value]="item.value2"></ion-radio>
</ion-item>
</ion-col>
<ion-col class="rate">
<ion-item no-padding>
<ion-radio [value]="item.value3"></ion-radio>
</ion-item>
</ion-col>
<ion-col class="rate">
<ion-item no-padding>
<ion-radio [value]="item.value4"></ion-radio>
</ion-item>
</ion-col>
<ion-col class="rate">
<ion-item no-padding>
<ion-radio [value]="item.value5"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</span>
this is my .ts file
ionViewDidEnter() {
this.itemDetails();
}
itemDetails() {
this.list_launches = [
{ id: 0, item: "item 1", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
{ id: 1, item: "item 2", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
{ id: 2, item: "item 3", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
{ id: 3, item: "item 4", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
{ id: 4, item: "item 5", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
{ id: 5, item: "item 6", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
{ id: 6, item: "item 7", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
{ id: 7, item: "item 8", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
{ id: 8, item: "item 9", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
{ id: 9, item: "item 10", review: 0, value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
]
}

Answer 3

Found the solution but needed to compromise with radio-button
here's the thing I done in my codes
my html
<ion-list>
<ion-list-header>
Select Your Preference
</ion-list-header>
<ion-item no-lines *ngFor="let list of prices_details; let i = index;">
<ion-label text-wrap *ngIf="list.size" style="font-size:12px; color:black;">
{{list.size}}
</ion-label>
<ion-label fixed text-right style="font-size:12px; color:black;">
₹ {{list.discounted_price}}
</ion-label>
<ion-checkbox item-left color="secondary" formControlName="list"
(ionChange)="selectSize(list.size ,list.discounted_price, $event.checked)">
</ion-checkbox>
</ion-item>
</ion-list>
in my .ts file
//Adds the checkbox to the array and check if user unchecked it
selectSize(size, discounted_price_pretty, isChecked: boolean) {
if (isChecked === true) {
this.selectedSize.push(size);
this.selectedSizePrice.push(discounted_price_pretty);
}
else {
let index = this.removeCheckedFromSize(size);
this.selectedSize.splice(index, 1);
let priceIndex = this.removeCheckedFromSizePrice(discounted_price_pretty);
this.selectedSizePrice.splice(priceIndex, 1);
}
}