Set first radio as preselected

Ionic Framework Ionic Angular
1

I need help with pre-selecting the first radio button from a generated list of radio buttons that can be changed if user selects a different radio btn…

I get the dates from an API and this is the model of the data:

export interface DeliveryDates {
  color: string;
  date: string;
  date_name: string;
}

my html template looks like this:

<ion-radio-group value="{{preSelectedDate}}"  [(ngModel)]="selectedValue">
  <ion-item *ngFor="let date of dates;let i = index" (click)="modal.dismiss()">
      <ion-icon name="today-outline"></ion-icon>
      <ion-label class="{{date.color}}">{{date.date_name}} {{ date.date }}</ion-label>
      <ion-radio slot="end" value="{{ date.date }}"></ion-radio>
  </ion-item>
</ion-radio-group>

This is how I’m getting the dates from a service:

  dates: DeliveryDates[];
  preSelectedDate: DeliveryDates['date'];

  constructor(
     ..some other code...
  ) { }

  getDeliveryDates() {
    this.datesSubscription = this.cartService.getDeliveryDates().subscribe(
      data => {
        this.dates = data;
        console.log('Possible dates: ', this.dates);
      },
      error => {
        console.log('Error', error);
      });
  }

and this is how I tried to set a preselected date:

  getSelectedDate() {
    const firstValue = this.dates[0].date;
    this.preSelectedDate = firstValue;
    console.log('Prednastavljen datum: ', this.preSelectedDate);
  }

I get this error in the browser console:

Uncaught (in promise): TypeError: Cannot read properties of undefined (reading ‘0’)

How do I set the first radio button to be preselected? what am I doing wrong?

2

i think it sould be “[value]=preSelectedDate” and the same for all the other fields, but I can’t be sure, I cant’ test it right now

3

I have changed it to what you suggested and I still get the same error

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading ‘0’)
TypeError: Cannot read properties of undefined (reading ‘0’)

4

then, you should check your item, it looks undefined, you must understand where it gets a value, if it gets one
my suggestion is using some console.log and following your component’s flow

5

Hey I have managed to set the date to the first one from the list… Now I just need help with making the radio be selected… how do I do this in html?

I tried setting the class to ion-radio-checked but nothing happened and I also tried to set checked=true to ion-radio

6

This is how my HTML looks like now:

<ion-list class="dates-list">
   <ion-radio-group [value]="preSelectedDate" (ionChange)="radioGroupChange($event)"  [(ngModel)]="selectedValue">
     <ion-item *ngFor="let date of dates;let i = index" (click)="modal.dismiss()">
        <ion-icon name="today-outline"></ion-icon>
        <ion-label class="{{date.color}}">{{date.date_name}} {{ date.date }}</ion-label>
        <ion-radio slot="end" [value]="date.date"></ion-radio>
     </ion-item>
   </ion-radio-group>
</ion-list>

I have tried adding this: checked="{{ i === 0 ? 'true' : '' }}" to and I tried adding this: class=“{{ i == 0 ? ‘ion-item-checked’ : ‘’ }}” to but the checkmark did not appear

7

i can check right now, but you must give a value to that ngmodel variable, selectedValue

1 Like
8

You were right! I changed the [(ngModel)]=“selectedValue” to [(ngModel)]=“preSelectedDate” and now the first radio is checked and I get its value in console log.

thank you

1 Like
9

you are welcome :slight_smile: let me know if you need anything else

1 Like