Ionic-framework: Radio button is not getting selected with formControl in it

[preraktiwari]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When I am using formControl in radio-group then I am not able toggle betwees radio button values.

Expected behavior:
The same code was working properly with Ionic 2 i,e I was able to toggle between radio button values.

Steps to reproduce:
I am not able to produce this on plunker. I am getting this issue on Android 6.0-->

Related code:
.html file

<ion-content>
<form [formGroup]="wsForm" (ngSubmit)="onSubmit(wsForm.value)" style="padding-top:50px">
    <ion-card >
      <ion-card-header >
        <ion-label >Q1. Question number 1 <label class="mandatory-indicator">*</label></ion-label> 
      </ion-card-header>

      <ion-list radio-group [formControl]="wsForm.controls['wsQuestion1']">
        <ion-item>
          <ion-label>Yes</ion-label>
          <ion-radio value="1"></ion-radio>
        </ion-item>

        <ion-item>
          <ion-label>No</ion-label>
          <ion-radio value="0"></ion-radio>
        </ion-item>
      </ion-list>
    </ion-card>  
    <ion-header color="secondary">
      <ion-navbar color="secondary">
        <ion-title>Questions</ion-title>
        <ion-buttons end padding-left>
          <button royal ion-button type="submit">
            <ion-icon ios="ios-arrow-round-forward" md="md-arrow-round-forward"></ion-icon>
          </button>
        </ion-buttons>
      </ion-navbar>
    </ion-header>
  </form>
</ion-content>

.ts file

@Component({
  templateUrl: 'worksearchquestionnaire.html',
})
export class WorksearchquestionnairePage {
  public wsForm : FormGroup;
  constructor(public nav: NavController,
              public formBuilder : FormBuilder) {
    this.initilizeWSQuestionnaireForm();
  }

  initilizeWSQuestionnaireForm(){
    this.wsForm = this.formBuilder.group({
      'wsQuestion1' : ['',Validators.required]
    });
  }
}

insert any relevant code here



md5-f8057b088b187d781b913a9873dab2be



insert the output from ionic info here

[jgw96]

Hello, thanks for using Ionic. We are planning on having a nightly release soon that should fix this. I will update with instructions on how to try this when that is released

[preraktiwari]

Is this a known issue?

[preraktiwari]

@jgw96 Even after updating to 3.1.1, I am still having the same Issue.

[preraktiwari]

@jgw96
I have provided more information and sample code project in following post : http://stackoverflow.com/questions/43726154/unable-to-toggle-between-radio-button-after-authenticating-user-using-mfp-8-0

[preraktiwari]

@jgw96 Did you get the change to look into it man. This has become a blocker for us. Please throw some light on it if this is a known bug.

[mariohmol]

I dont know if is the same case.. but seems to be.. cant` use formControlName in radio-groups

https://github.com/angular/angular/issues/14057#issuecomment-319415663

[NurGuz23]

same Issue here, any idea?

[patwaswapnil]

same here... frustrating

[mariohmol]

chaging to [formControl] works in my side... for example

<form [formGroup]="decisionForm">
          <ion-grid radio-group [formControl]="decisionForm.controls.auctionStatus">

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/216