Radio button then it is not getting selected with formCOntrol in it


#1

I am having strange issue with Ionic 3.

Following is my code:

.html file

 <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' : [this.wsQuestion1,Validators.required]
    });
  }
}

I am using Ionic 3 with cordova 6.5. I am testing into Android Device. When I select radio button then it is not getting selected with formCOntrol in it? If i remove the form control code from ion-list then its working fine. What could be the issue?


#2

A couple of things jump out at me.

'wsQuestion1' : [this.wsQuestion1,Validators.required]

I believe the first element in that array needs to be the initial value of the control, so I would make it:

'wsQuestion1' : ['0', this.wsQuestion1,Validators.required]
[formControl]="wsForm.controls['wsQuestion1']"

Much simpler to write:

formControlName="wsQuestion1"

#3

I am still having the same issue.