Angular自定义输入组件keypress事件替换非数字符号不生效问题

问题根因 #

• 输入框通过[value]="config.value"单向绑定值，替换非数字后仅调用了onChange()通知表单控件值更新，没有同步修改绑定的数据源或输入框的实际显示值，导致视图未刷新
• keypress事件触发时机早于输入框值更新，你拿到的是按键前的旧值处理，后续非法字符会通过默认行为写入输入框
• 同时绑定input和keypress两个事件触发同一份处理逻辑，重复执行导致逻辑冲突

修复步骤 #

1. 调整HTML事件绑定 #

移除重复的keypress事件绑定，可选新增keydown事件从源头拦截非法输入：

<input
  type="text"
  tabindex="0"
  class="search__input form-control-md + {{ class }}"
  [value]="config.value"
  [required]="config.required"
  [attr.maxlength]="config.maxLength"
  [attr.minLength]="config.minLength"
  (focusout)="onFocusOut($event)"
  (input)="onValueChange($event)"
  (keydown)="onKeyDown($event)"
  (keyup.enter)="onEnter($event)"
  #inputElem
/>

2. 新增输入框元素引用 #

组件类中通过@ViewChild获取输入框DOM引用，方便手动更新显示值：

// 引入必要依赖
import { ViewChild, ElementRef } from '@angular/core';

export class TextFieldComponent implements OnInit, ControlValueAccessor {
  // 新增这一行获取输入框引用
  @ViewChild('inputElem') inputElem: ElementRef<HTMLInputElement>;

  // 原有代码保持不变...

3. 修改changeValue方法同步视图 #

替换完非数字后，同步更新本地存储值和输入框显示值：

changeValue(value) {
  let result;
  switch (this.config.isNumber) {
    case true:
      result = value != null ? value.toString().replace(/[^0-9]/g, "") : null;
      // 同步更新本地值和输入框显示
      this._value = result;
      if(this.inputElem?.nativeElement) {
        this.inputElem.nativeElement.value = result || '';
      }
      this.onChange(result);
      break;
    default:
      if (this.value === value) {
        return;
      }
      this._value = value;
      this.onChange(value);
  }
}

4. 可选优化：新增keydown拦截逻辑 #

从输入源头阻止非数字字符录入，提升使用体验：

onKeyDown(event: KeyboardEvent) {
  if (!this.config.isNumber) return;
  // 允许数字、功能键（退格、删除、方向键、回车、Tab）、快捷键操作
  const allowedRule = /[0-9]|Backspace|Delete|ArrowLeft|ArrowRight|Enter|Tab/;
  if (!allowedRule.test(event.key) && !event.ctrlKey && !event.metaKey) {
    event.preventDefault();
  }
}

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