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

如何解决限制用户在输入字段 angular 12 中输入特定值

<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() 事件中使用它，字符已经填充到文本文件中，那么执行 {{1 }}。如果我在 event.preventDefault() 事件中执行此操作，则无法在 keydown() 事件完成之前提取文本字段的完整值。而且我还应该适应现场的复制和粘贴。

keydown() 事件没有权限，我只需要在用户输入期间检查它，并避免它出现在提交的文本中。

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

解决方法

就像 Sebastian Ciocarlan 所说的那样，您可以从输入中删除 $，如果不需要存储 $，则只允许使用数字和逗号。

但是，除了使用 <div>，您还可以使用来自 angular material（如果您使用它）的 matPrefix 在您的输入前添加 $（或者 matSuffix，如果您想放置它在最后）。

您可以在此处查看示例：https://material.angular.io/components/form-field/overview#prefix--suffix