Angular中@HostBinding绑定value属性仅首次生效问题咨询

• @HostBinding的更新机制限制：@HostBinding 依赖Angular的脏检查逻辑，仅当绑定的类属性（此处为lowerValue）的值发生明确变更时，才会主动将新值同步到宿主元素的value属性。它不会主动比对当前DOM的实际值和绑定变量的值，只要绑定变量没有触发变更检测，就不会推送更新到DOM。
• 手动交互后的状态不同步：当你手动修改输入框内容时，浏览器会直接更新输入框的DOM value属性，如果你在指令的输入事件处理逻辑中，仅做了值转换上报给模型、或者直接修改了DOM的value，但没有同步更新lowerValue变量，就会导致lowerValue和DOM实际值、模型值三者不一致。
• 表单值同步的逻辑叠加：当你通过ControlValueAccessor的onChange方法上报转换后的值给表单模型后，如果新的模型值和上报值完全一致，Angular表单会认为状态已经同步，若此时你的lowerValue没有同步更新，后续writeValue传入相同值时，lowerValue不会触发变更，自然也不会更新DOM。

你可以根据自己的场景选择以下两种方案：

1. 修正绑定变量的同步逻辑
   确保所有会修改输入框值的场景都同步更新lowerValue：

// 输入事件处理
@HostListener('input', ['$event.target.value'])
onInput(val: string) {
  // 按你的业务逻辑转换值，此处示例为转大写上报
  const formattedVal = val.toUpperCase();
  this.onChange(formattedVal);
  // 同步更新绑定变量，保持和DOM状态一致
  this.lowerValue = val;
}

// writeValue 方法确保每次都更新绑定变量
writeValue(val: string): void {
  this.lowerValue = val ? val.toLowerCase() : '';
}

2. 改用直接操作DOM的方式（更推荐，尤其适用于datetime-local等格式要求严格的场景）
   放弃@HostBinding，直接通过ElementRef操作输入框的value，绕过HostBinding的更新限制，可控性更高：

@Directive({
  selector: 'input[uppercase]',
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UpperCaseInputDirective), multi: true }],
})
export class UpperCaseInputDirective implements ControlValueAccessor {
  constructor(private el: ElementRef<HTMLInputElement>) {}

  writeValue(val: string): void {
    // 直接赋值给DOM，无需依赖HostBinding
    this.el.nativeElement.value = val ? val.toLowerCase() : '';
  }

  @HostListener('input', ['$event.target.value'])
  onInput(val: string) {
    const upperVal = val.toUpperCase();
    this.onChange(upperVal);
  }

  // 其余ControlValueAccessor方法实现保持不变
  onChange = (val: any) => {};
  onTouched = () => {};
  registerOnChange(fn: any): void { this.onChange = fn; }
  registerOnTouched(fn: any): void { this.onTouched = fn; }
}

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