CODEWITHSUNDEEP
angularionic4
Sarah Mandana
Sarah Mandana

Reputation: 1513

Unable to pre-select the radio button in the form by default in Angular using Ionic 4

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()
    });

Upvotes: 1

Views: 1357

Answers (1)

SantiagoValdez
SantiagoValdez

Reputation: 191

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

Upvotes: 1

Related Questions