限制用户在输入字段 angular 12 中输入特定值

【问题标题】：Restricting user to enter specific values in input field angular 12限制用户在输入字段 angular 12 中输入特定值
【发布时间】：2021-07-20 06:34:01
【问题描述】：

我有一个输入字段

<input type="text" [value]='$' (keydown)="handleKeyDown($event)">

美元符号已预先填写。 如何限制用户仅输入模式“$1,000.00”（带 $ 前缀的美元）；

到目前为止，我可以限制用户输入除$ , . and numbers 以外的值，但是，他们可以输入连续的逗号、美元符号和点。

handleKeyDown(event:any){
    let key = event.keyCode || event.which;
    if((key>=48 && key<=57) || (key===52 || key===190 || key===188 || key===8)){
      return true;
    }else{
      return false;
    }
 }

要限制我正在使用正则表达式，并且正则表达式可以正常工作。但是，我不确定在哪个事件中我应该使用Regex.test()，因为如果我在keyup() 事件中使用它，该字符已经填充到文本字段中，那么执行event.preventDefault() 是没有意义的。 如果我在keydown() 事件中执行此操作，那么我无法在keydown() 事件完成之前提取文本字段的完整值。而且我还应该在字段中进行复制和粘贴。

blur 事件没有权限，我只需要在用户输入时检查它，避免它出现在文本字段中。

有没有办法做到这一点？您会建议使用反应式表单输入字段的更简单方法吗？

【问题讨论】：

• 您需要输入字段包含$符号吗？我会做一个小的“hack”，看起来像开头有一个 $，就像在带有 $ 符号的输入旁边使用

  一样。如果您需要将 $ 放在输入值上，在他触发操作后，我会检查他使用的值是否是有效数字，然后将 $ 添加为字符串的第一个字符。
• 是的，我可以保留一个 $ 占位符并在用户输入有效值后使 $ 出现。
• 我查了一下 ngx mask 是怎么做的，用一种方法做起来很痛苦github.com/JsDaddy/ngx-mask/blob/develop/projects/ngx-mask-lib/…
• 天哪，那是巨大的。