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>
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.
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With