Angular CustomValueAccessor问题：模型变更时输入值不刷新

问题现象 #

• 首次将输入框值设为-1并失焦：handleBlur触发，模型通过Math.abs处理值，writeValue触发，输入值变为1，流程正常
• 再次将输入框值设为-1并失焦：handleBlur触发，模型同样执行Math.abs，但writeValue未触发，输入值停留在-1

推测原因 #

第二次处理后的值（1）与当前模型值一致，Angular表单控件因值未发生变更，跳过了writeValue的触发逻辑。尝试通过ngControl.control.setValue重置值未成功。

解决方法 #

方法1：强制控件更新视图 #

在handleBlur中处理完值后，手动标记控件状态并强制更新：

handleBlur() {
  const processedValue = Math.abs(this.value);
  this.onChange(processedValue);
  
  if (this.ngControl?.control) {
    this.ngControl.control.markAsDirty();
    // 强制更新视图，不向外触发事件
    this.ngControl.control.updateValueAndValidity({ emitEvent: false, onlySelf: true });
  }
  
  this.onTouched();
}

方法2：触发值变更检测 #

先设置临时值再恢复，让Angular检测到值变化：

handleBlur() {
  const processedValue = Math.abs(this.value);
  
  // 先设置临时值触发变更
  this.onChange(processedValue + 1);
  // 异步恢复目标值
  setTimeout(() => this.onChange(processedValue), 0);
  
  this.onTouched();
}

方法3：直接更新输入元素 #

绕过writeValue，直接操作DOM更新输入框内容：

@ViewChild('input') private inputEl: ElementRef<HTMLInputElement>;

handleBlur() {
  const processedValue = Math.abs(this.value);
  this.onChange(processedValue);
  
  // 直接更新输入框显示值
  if (this.inputEl) {
    this.inputEl.nativeElement.value = processedValue.toString();
  }
  
  this.onTouched();
}

内容的提问来源于stack exchange，提问作者K.Dzien