Ionic 4 Reactive Forms clear ion radio group selection

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

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.