Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 759
user33276346 Avatar asked Apr 20 '17 17:04

user33276346


People also ask

How do I disable ion radio button?

A radio button options can be checked by selecting it or checked programmatically by setting the checked property. It also uses a disabled attribute to disable the user from changing the value.

How do you reset an ion radio button?

Solution for IONIC 5: i) define radio group reference. ii) add a click event with radio group. It will reset the radio button also the model/formcontrol too.

How do you checked radio button in ionic?

When radios are inside of a radio group , only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.

How do you make an ionic radio button?

Use an element with a radio-group attribute to group a set of radio buttons. When radio buttons are inside a radio group, exactly one radio button in the group can be checked at any time. If a radio button is not placed in a group, they will all have the ability to be checked at the same time.


1 Answers

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

like image 148
AT82 Avatar answered Nov 15 '22 03:11

AT82