Angular2+ TypeScript正则限制负小数输入逗号及负号问题修复

核心修改点 #

• 直接拦截逗号输入：在按键事件中优先判断逗号，直接阻止输入，比正则校验更高效
• 调整正则规则：允许输入过程中的临时合法状态（如单独负号、负号加小数点），同时保证最终输入为合法正负小数（最多5位小数）

修改后的完整代码 #

private el: HTMLInputElement;

private check(value: string) {
  // 允许空值、单独负号、负号加小数点，以及合法的正负小数（最多5位小数）
  const regExpString = "^-?\\s*(\\d*(\\.\\d{0,5})?)?\\s*$";
  // 额外检查是否包含逗号，存在则直接不通过
  if (value.includes(',')) return null;
  return String(value).match(new RegExp(regExpString));
}

@HostListener("keydown", ["$event"])
onKeyDown(v) {
  // 直接拦截逗号按键
  if (v.key === ',') {
    v.preventDefault();
    return;
  }

  const value: string = this.el.value;
  const next: string = value.concat(v.key); 
  if (next && !this.check(next)) { 
    v.preventDefault();
  }
}

可选优化：失焦时严格校验 #

如果需要确保用户最终输入的不是空值、单独负号或小数点，可以添加失焦事件校验：

@HostListener("blur")
onBlur() {
  const value = this.el.value.trim();
  // 严格规则：必须是带数字的正负小数/整数
  const strictReg = "^-?\\s*(\\d+(\\.\\d{0,5})?|\\d*\\.\\d{1,5})\\s*$";
  if (!value.match(new RegExp(strictReg))) {
    // 此处可根据需求处理，比如清空输入框
    this.el.value = '';
  }
}

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