CODEWITHSUNDEEP
htmlangulartypescriptionic2
V. Pivet
V. Pivet

Reputation: 1328

Ionic 2 : Radio button in form, checked by default

I try to create a dynamic form in my project and I have some radio button. I want to check one of them by default. I tried this : 

<input *ngIf="fieldForm.value.type == 'date'" type="date" formControlName="field">
  <div *ngIf="fieldForm.value.type == 'radio'">
    <div *ngFor="let option of fieldForm.value.options.values" >
      <label><input type="radio" formControlName="field" value="{{option}}">{{option}}</label>
    </div>
    <div>
      <label><input type="radio" formControlName="field" value="Toto" checked="checked">Toto</label>
    </div>
  </div>

But it doesn't work. I don't understand what I have to do. Someone have an idea ?

Upvotes: 2

Views: 7748

Answers (2)

V. Pivet
V. Pivet

Reputation: 1328

It's ok ! I have find a solution !

In my html : 

  <div *ngIf="fieldForm.value.type == 'radio'">
    <ion-list formControlName="field" radio-group [(ngModel)]="value">
      <ion-item *ngFor="let option of fieldForm.value.options.values" >
        <ion-label>{{option.label}}</ion-label>
        <ion-radio  value="{{option.value}}"></ion-radio>
      </ion-item>

    </ion-list>
  </div>

The "ngModel" permit to get selected value. I have to init it with a correct value in my .ts file.

Upvotes: 1

Chen Zissu
Chen Zissu

Reputation: 73

easy all you need is just to delete this: checked="checked"

so your code will look like:

<input *ngIf="fieldForm.value.type == 'date'" type="date" formControlName="field">
  <div *ngIf="fieldForm.value.type == 'radio'">
    <div *ngFor="let option of fieldForm.value.options.values" >
      <label><input type="radio" formControlName="field" value="{{option}}">{{option}}</label>
    </div>
    <div>
      <label><input type="radio" formControlName="field" value="Toto">Toto</label>
    </div>
  </div>

Upvotes: 0

Related Questions