Angular表单求助：按钮与输入框值不同步，编辑后值丢失

你的问题核心在于表单值更新方式错误以及输入框绑定冲突，具体原因和修复步骤如下：

问题原因 #

1. 直接修改FormGroup.value不触发表单变更检测
   你通过this.target.value.time = num这种方式修改值，只是修改了表单值对象的属性，但Angular的FormControl并未感知到变化——表单控件的实际状态仍为旧值。当手动编辑输入框时，表单会用控件的当前状态覆盖你手动修改的value，导致之前设置的值全部丢失。

2. formControlName与[value]绑定冲突
   formControlName已经实现了表单控件与输入框的双向绑定，额外添加的[value]会干扰Angular的表单状态管理，进一步加剧值不同步的问题。

修复步骤 #

1. 使用表单API更新值，替代直接修改value #

Angular表单提供patchValue()/setValue()方法，能安全触发表单变更检测，同步模型与视图。

修改TS中的按钮点击方法：

// 方案1：合并为通用方法（更简洁）
public setFormValue(controlName: string, num: number) {
  this.target.patchValue({ [controlName]: num });
}

// 方案2：保留原方法名（兼容现有代码）
public clickButtonNum(num: number) {
  this.target.patchValue({ time: num });
}
public clickButtonSoc(num: number) {
  this.target.patchValue({ state_of_charge: num });
}
public clickButtonEnergy(num: number) {
  this.target.patchValue({ energy: num });
}

2. 移除输入框上的[value]绑定 #

仅保留formControlName，让Angular自动处理值同步：

<!-- Time输入框 -->
<input class="border-2 mt-3 w-full px-3 py-1 rounded-md text-black" 
       formControlName="time" 
       type="number" 
       placeholder="{{ 'time charging on minutes' | translate }}" />

<!-- SoC输入框 -->
<input class="border-2 mt-3 w-full px-3 py-1 rounded-md text-black" 
       formControlName="state_of_charge" 
       type="number" 
       placeholder="{{ 'battery (%)' | translate }}" />

<!-- Energy输入框 -->
<input class="border-2 mt-3 w-full px-3 py-1 rounded-md text-black" 
       formControlName="energy" 
       type="number" 
       placeholder="{{ 'energy charging / kW' | translate }}" />

3. （可选）简化按钮点击事件 #

如果使用通用的setFormValue方法，按钮代码可进一步简化：

<!-- Time按钮 -->
<button (click)="setFormValue('time', 0)" class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2 shadow-md">0</button>
<button (click)="setFormValue('time', 60)" class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2 shadow-md">60</button>

<!-- SoC按钮 -->
<button (click)="setFormValue('state_of_charge', 0)" class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2 shadow-md">0</button>
<button (click)="setFormValue('state_of_charge', 30)" class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2 shadow-md">30</button>

<!-- Energy按钮 -->
<button (click)="setFormValue('energy', 0)" class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2 shadow-md">0</button>
<button (click)="setFormValue('energy', 10)" class="bg-green-400 hover:bg-green-300 cursor-pointer w-10 h-10 rounded-md mx-2 shadow-md">10</button>

修改后，按钮设置值时会通过Angular表单官方API更新，确保表单控件状态与视图同步；输入框仅依赖formControlName绑定，避免了手动赋值与表单自动绑定的冲突，即可解决“设置值后编辑输入框丢失所有值”的问题。

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