Angular表单重置后自定义输入组件值未清除问题求助

你的问题出在自定义输入组件的ControlValueAccessor实现不完整，具体是writeValue方法没有正确处理表单重置时传入的null值，导致组件内部的输入状态没有和表单控件同步。

具体修改步骤 #

打开custom-input.component.ts，修改writeValue方法：

writeValue(value: any): void {
  // 当值为null/undefined时，将组件内部的inputValue设为空字符串，同步到模板
  this.inputValue = value ?? '';
}

为什么首次正常、后续失效？ #

首次清除时，表单控件从非空值变为null，组件内的inputValue因初始状态为空刚好匹配；但后续操作后，组件内的inputValue保留了之前的输入值，而原writeValue只在有非空值时才更新，忽略了null的情况，导致表单控件值是null，但组件输入框还显示旧值。

另外要确保组件模板的输入框和inputValue双向绑定正确，且输入时通过onChange通知表单控件更新：

<!-- custom-input.component.html -->
<input 
  type="text" 
  [(ngModel)]="inputValue"
  (ngModelChange)="onChange($event)"
/>

修改后调用form.reset()时，表单控件会把null传给writeValue，组件内部的输入值会被重置为空字符串，和普通输入框的行为保持一致。

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