Angular keypress事件获取输入值缺失最后一位的问题与解决

问题现象 #

绑定Angular的(keypress)事件处理输入框逻辑时，尝试读取event.target.value存入变量会出现值缺失最后一位的问题：例如输入pizza时，实际存储值为pizz，无法拿到完整输入内容。

复现代码 #

HTML模板 #

<input type="text" (keypress)="onKeypressEvent($event)" />

TypeScript逻辑 #

storedValue: string = '';

onKeypressEvent(event: any) {
  console.log(event);
  console.log(event.target.value);
  this.storedValue = event.target.value;

  if (event.key === 'Enter') {
     this.onSubmit();
  }
}

问题原因 #

keypress事件的触发时机早于输入框值的更新：事件触发时当前按下的字符还未写入输入框的value属性，因此此时读取到的event.target.value是按键输入前的旧值，自然会缺失当前输入的最后一位字符。

可行解决方案 #

通过(input)事件做值同步是正确的解决思路：input事件会在输入框值完成更新后触发，此时读取到的就是完整的最新输入值；(keypress)事件仅保留处理按键判断逻辑（比如回车触发提交）即可，不需要在该事件中取值。
该方案完全可行，是符合Angular事件机制的常规写法，不存在不规范问题。
修正后代码如下：

HTML模板 #

<input type="text" (input)="keyValue($event)" (keypress)="onKeypressEvent($event)" />

TypeScript逻辑 #

storedValue: string = '';

// 仅处理按键相关逻辑，不在这里读取输入值
onKeypressEvent(event: any) {
  if (event.key === 'Enter') {
    this.onSubmit();
  }
}

// 输入值更新完成后同步存储
keyValue(event: any) {
  this.storedValue = event.target.value;
}

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