Search code examples
ionic-frameworkradio-button

How to submit ionic Radio button value on button click?


Need to pass the value of selected radio button upon clicking the submit button

<!--Starts Location Select Popover -->
<ion-list>
  <ion-list-header>
    <h5> Select Location</h5>
  </ion-list-header>
  <ion-item *ngFor="let store of storeLocations">
    <ion-label>{{store?.storeName}}</ion-label>
    <input type="radio" slot="end" value="{{store}}" />
  </ion-item>
  <ion-button expand="block" (click)="dismissLocationSelectPopover(store)">Submit Location
  </ion-button>
</ion-list>
<!--Ends Location Select Popover -->

Solution

  • [(ngModel)] is not supported. Better to use (click) instead.

    HTML

    <input type="radio" slot="end" value="{{storeLoc.storeName}}" id="{{storeLoc.storeName}}"(click)="storeSelected(storeLoc)" />
    

    TS

      storeSelected(storeLoc) {
        this.storeSelected = storeLoc;
      }