1

I am using ionic to create a form with radio buttons in it. I am trying to check a radio button by default, but nothing is working. I tried several options, including:

checked ={{selected}} (With selected=true in ts)

checked= 'true'

checked

[checked]= 'true'

Tried adding value directly while initializing the form, still it does not work

Nothing works. Does anyone have any suggestion?

<form [formGroup]="FormName" (ngSubmit)=sendData()>
        <ion-list>
          <ion-list-header>
            <ion-label>One</ion-label>
          </ion-list-header>
          <ion-radio-group [formControlName]="'products'">

            <ion-item>
              <ion-label>{{value1}}</ion-label>
              <ion-radio slot="start" value={{value1}} checked></ion-radio>
            </ion-item>

       <ion-item>
              <ion-label>{{value2}}</ion-label>
              <ion-radio slot="start" value={{value2}}'></ion-radio>
            </ion-item>

         </ion-radio-group>
        </ion-list>
    </form>

Typescript:

 this.FormName = new FormGroup({
      products: new FormControl()
    });

1 Answer 1

1

Here's a little example how to stablish a default value on a radio-group.

Let's say this is your template file:

 <form (submit)="doSubmit($event)" [formGroup]="langForm">
    <ion-list radio-group formControlName="langs">

      <ion-list-header>
        Language
      </ion-list-header>

      <ion-item>
        <ion-label>Go</ion-label>
        <ion-radio value="golang" checked="true"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Rust</ion-label>
        <ion-radio value="rust"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Python</ion-label>
        <ion-radio value="python"></ion-radio>
      </ion-item>
  </form>

On your page component you will need to do as follow:

@Component({
  templateUrl: 'page-template.html'
})
export class BasicPage {
  langs;
  langForm;

  constructor() {
    this.langForm = new FormGroup({
      "langs": new FormControl({value: 'rust', disabled: false})
    });
  }
}

Remember that you need to mark a radio as checked and also put the value of that given element as the radio-group value. In this example, the ion-radio with the element rust is mark as checked, and the value given to the ion-radio-group is rust

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.