Ionic 4 Reactive Forms clear ion radio group selection - angular7

Question

I am trying to clear ion-radio-group selection in Ionic 4.
My html:
<ion-radio-group formContolName="oilPanStatus" (ionSelect)="OilPanStatusChanged($event)">
<ion-list-header>
<ion-label>Is the oil-pan status good?</ion-label>
</ion-list-header>
<ion-item lines="none">
<ion-label>Yes</ion-label>
<ion-radio slot="start" value="true"></ion-radio>
</ion-item>
<ion-item lines="none">
<ion-label>No</ion-label>
<ion-radio slot="start" value="false"></ion-radio>
</ion-item>
</ion-radio-group>
This is my attempt to clear in .ts:
this.Form.reset();
this.Form.controls.oilPanStatus.reset();
I see that the Form is correctly reset with all values and errors cleared. But in the UI i see old selection is still shown.
How can i clear the previously selected radio buttons.

Answer 1

Solution for IONIC 5:
i) define radio group reference.
ii) add a click event with radio group.
Working example:
Template code
<ion-radio-group formControlName="future_studies" #refRadio
(click)="resetRadioGroup(refRadio, $event.target.value, form.controls.future_studies)">
<ion-list-header>
<ion-label>My studies</ion-label>
</ion-list-header>
<div class="radio-group">
<ion-item>
<ion-label>Yes</ion-label>
<ion-radio slot="start" value="yes"></ion-radio>
</ion-item>
<ion-item>
<ion-label>No</ion-label>
<ion-radio slot="start" value="no"></ion-radio>
</ion-item>
</div>
</ion-radio-group>
click event handler function:
resetRadioGroup(ref, eventVal, control) {
if (eventVal === ref.value) {
setTimeout(() => {
ref.value = null;
control.reset();
}, 100);
}
}
It will reset the radio button also the model/formcontrol too.
Thumbs up!

Answer 2

Not sure if this is the correct way. But the only way i found to get this to work with reactive forms is:
move formControlName to individual ion-radio elements:
<ion-radio-group (ionSelect)="Selected($event)">
<ion-list-header>
<ion-label>Is the oil-pan status good?</ion-label>
</ion-list-header>
<ion-item lines="none">
<ion-label>Yes</ion-label>
<ion-radio slot="start" value="true" formContolName="radio" [checked]="radio.value==='true'"></ion-radio>
</ion-item>
<ion-item lines="none">
<ion-label>No</ion-label>
<ion-radio slot="start" value="false" formContolName="radio" [checked]="radio.value==='false'"></ion-radio>
</ion-item>
</ion-radio-group>
Then add a [checked] property, so that when form is reset(this.Form.reset()) the value of the radio formControl is set to ''. Thus none of the [checked] conditions are suttisfied and the UI is actually reset.