哈哈，这个问题我之前做医疗类表单的时候也踩过坑！*ngIf只是把输入框隐藏起来了，但绑定的surgeryDate变量还好好待在内存里呢，提交的时候自然会跟着发去服务器。给你几个简单直接的解决办法：

最直观的方式就是在用户选中“否”的时候，手动把surgeryDate设为空。修改你的模板代码：

<div class="custom-control custom-radio">
  <input type="radio" id="hasSurgeryYes" name="hasSurgery" [(ngModel)]="hasSurgery" value="true" class="custom-control-input">
  <label class="custom-control-label" for="hasSurgeryYes">是</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="hasSurgeryNo" name="hasSurgery" [(ngModel)]="hasSurgery" value="false" class="custom-control-input" (change)="clearSurgeryDate()">
  <label class="custom-control-label" for="hasSurgeryNo">否</label>
</div>

<!-- 手术日期输入框，保持你的ngIf逻辑 -->
<div *ngIf="hasSurgery === 'true'">
  <input type="date" [(ngModel)]="surgeryDate" name="surgeryDate">
</div>

然后在组件的.ts文件里加个简单的方法：

clearSurgeryDate() {
  this.surgeryDate = null; // 如果你的日期是字符串类型，也可以设为''
}

不想单独写方法的话，可以直接在单选框的ngModelChange事件里做判断，一行代码搞定：

<input type="radio" id="hasSurgeryNo" name="hasSurgery" [(ngModel)]="hasSurgery" value="false" class="custom-control-input" 
       (ngModelChange)="$event === 'false' ? surgeryDate = null : null">

当用户切换到“否”时，$event会返回'false'，这时直接把surgeryDate置为null就行。

如果担心还有其他边界情况（比如用户直接跳过单选框操作），可以在表单提交的方法里加一层判断，确保非手术状态下不会提交日期：

onSubmitForm() {
  // 先判断是否需要清空日期
  if (this.hasSurgery !== 'true') {
    this.surgeryDate = null;
  }
  // 再执行提交到服务器的逻辑
  // ...
}

核心思路就是：*ngIf只负责DOM的显示隐藏，不会自动清空绑定的变量，所以必须主动去重置surgeryDate的值，这样提交时就不会把无效的日期发过去了。

内容的提问来源于stack exchange，提问作者GoGo