Как удалить значение с помощью `ngIf`?

Question

У меня есть флажок, который я пытаюсь зафиксировать дату операции. Цель состоит в том, чтобы отобразить дату операции, если пользователи нажимают "да" (радиокнопка), и ничего не отображать, если они нажимают "нет". Я могу сделать это с помощью ngIf, Однако проблема заключается в том, что пользователи сначала нажимают "да", а затем "нет", система по-прежнему сохраняет surgeryDate, Я не мог найти способ удалить это, чтобы он не пошел на сервер, если пользователи делают это.

Вот мой код:

<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="custom-control custom-radio">
    <input id="q2Yes" name="q2" type="radio" class="custom-control-input" value="yes" [(ngModel)]="screen.q2" #q2="ngModel" required>
    <label class="custom-control-label" for="q2Yes">YES</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>

Answer 1

Добавьте (change)="screen.q2SurgeryDate=''" к кнопке без кнопки. Затем, когда вы нажимаете Нет, значение удаляется.

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

<div class="custom-control custom-radio">
    <input id="q2Yes" name="q2" type="radio" class="custom-control-input" value="yes" [(ngModel)]="screen.q2" #q2="ngModel" required>
    <label class="custom-control-label" for="q2Yes">YES</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>