CODEWITHSUNDEEP
htmlionic-frameworkionic3
Tonye Boro
Tonye Boro

Reputation: 313

Radio button only select first value in ionic when submitting to database

I have this group of radio buttons:

<ion-list radio-group >
<ion-list-header>
Location
</ion-list-header>

<ion-item>
<ion-label>Rural</ion-label>
<ion-radio value="rural" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Urban</ion-label>
<ion-radio value="urban" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Other</ion-label>
<ion-radio value="other" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

</ion-list>

The problem is if I pick Other which is the third radio button and submit, Rural will be the one to submit which is the first one.

And, it also occur with all the radio buttons. Only the first one get submitted.

I used @ViewChild("schloc")schloc; to hold the values of the radio button.

Upvotes: 1

Views: 613

Answers (2)

TheLebDev
TheLebDev

Reputation: 531

I would recommend using FormControl for it, so your code would look something like

<ion-list radio-group formControlName="yourFormControl">
<ion-list-header>
Location
</ion-list-header>

<ion-item>
<ion-label>Rural</ion-label>
<ion-radio value="rural" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Urban</ion-label>
<ion-radio value="urban" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

<ion-item>
<ion-label>Other</ion-label>
<ion-radio value="other" class="radio" name="schloc" #schloc ></ion-radio>
</ion-item>

</ion-list>

and then in your TS file: valueToSubmit = yourFormGroup.get('formControlName').value

Upvotes: 0

Preeti Jolapra
Preeti Jolapra

Reputation: 36

You can use this code: schloc: any // define 

  <ion-list radio-group [(ngModel)]="schloc">
    <ion-list-header>
      Location
    </ion-list-header>

    <ion-item>
      <ion-label>Rural</ion-label>
      <ion-radio value="rural"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Urban</ion-label>
      <ion-radio value="urban"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Other</ion-label>
      <ion-radio value="other"></ion-radio>
    </ion-item>
  </ion-list>

when you are submitting data, use this.schloc

Upvotes: 1

Related Questions