I am using Ionic v3 for my new project. Here I have added a radio button for a radio check on my form page. But radio check and uncheck not working for me.
My Code
this.checkedRadio = false or this.UncheckedRadio = true <ion-radio [(ngModel)]="checkedRadio" value="new"></ion-radio> <ion-radio [(ngModel)]="UncheckedRadio" value="existing"></ion-radio>
Apply checked instead of ngModel. Follow the below code.
.ts
public checkedRadio: boolean = true; public UncheckedRadio: boolean = false;
HTML
<ion-radio [checked]="checkedRadio" value="new"></ion-radio> <ion-radio [checked]="UncheckedRadio" value="existing"></ion-radio>
Add a click function to check or uncheck the radio button.
Example:
<ion-row> <ion-col col-6> <ion-item> <ion-label>New</ion-label> <ion-radio [checked]="checkedRadio" value="new" (click)="ClickRadio('new')"></ion-radio> </ion-item> </ion-col> <ion-col col-6> <ion-item> <ion-label>Existing</ion-label> <ion-radio [checked]="UncheckedRadio" value="existing" (click)="ClickRadio('existing')"></ion-radio> </ion-item> </ion-col> </ion-row>
Click Function:
ClickRadio(val) { if (val == "new") { this.checkedRadio = true; this.UncheckedRadio = false; } if (val == "existing") { this.checkedRadio = false; this.UncheckedRadio = true; }
Hope it will be help full for you.
Question and answer is powered by AnsPress.io