How to remove value using `ngIf`?

I have a checkbox that I am trying to capture some surgery date. The goal is to display surgery date if users click on "yes" (radio button) and display nothing if they click on "no". I am able to do this using ngIf. However, the problem is that is users click on "yes" first then click on "no", the system still keeps surgeryDate. I couldn't find a way to remove this so that it doesn't go to the server if users do that.

Here is my code:

<div class="custom-control custom-radio">
    <input id="q2No" name="q2" type="radio" class="custom-control-input" value="no" [(ngModel)]="screen.q2" #q2="ngModel" required>
    <label class="custom-control-label" for="q2No">NO</label>
</div>

<div class="mb-3" *ngIf="screen.q2 === 'yes'">
    <label for="q2SurgeryDate">Surgery Date</label>
    <input class="form-control" type="text" bsDatepicker [bsConfig]="bsConfig" placeholder="Surgery Date" name="q2SurgeryDate" [(ngModel)]="screen.q2SurgeryDate" #q2SurgeryDate="ngModel" required>
</div>

<div class="mb-3" *ngIf="screen.q2 === 'no'">
     <input class="form-control" type="text" bsDatepicker [bsConfig]="bsConfig" placeholder="Surgery Date" name="q2SurgeryDate">
</div>