Search code examples
angularradio-buttonionic2

Is there a simple way to unselect a ion-radio in Ionic 2?


After the user select an ion-radio a function is called at the component. I need that function to unselect the radio.

THE TEMPLATE:

  <form [formGroup]="myForm">
    <ion-list radio-group formControlName="listOptions">
      <ion-item>
        <ion-label>Option 1</ion-label>
        <ion-radio value="1" (ionSelect)="myFunction($event)"></ion-radio>
      </ion-item>
    </ion-list>
  </form>

Solution

  • Not sure about the usecase here, but here we go...

    Since you are using a reactive form, you have some functions you can execute on form controls, one of them is reset(). So in your function, you would just reset the value like so:

    myFunction() {
      this.myForm.controls.listOptions.reset()
    }
    

    and it will reset it to unchecked, if that is your initial state of the radio button.

    Demo, which sets resets radio button after a couple of seconds