Restricting user to enter specific values in input field angular 12

Question

I have a input field

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

Dollar sign is prefilled. How can I restrict user to enter only the pattern '$1,000.00' (US dollars with $ prefix);

So far , I was able to restrict the user from entering values other than $ , . and numbers But, they can enter consecutive commas, dollar symbol and dots.

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;
    }
 }

To restirct that I am using a Regex and regex works fine. But, I am not sure in which event I should use the Regex.test(), because if I use it in keyup() event the character is already populated in the text filed, there is no point in doing event.preventDefault(). If I do it in keydown() event then I can not extract the complete value of the text field before the keydown() event is finished. And I should also accomodate copy and paste in the field.

There is no privision for blur event, I need to check this during the user input only, and avoid it from appearing in the text filed.

Is there anyway to achieve this? Would you suggest an easier way using the reactive form input field?

Do you need the input field to contain the $ sign? I would make a small "hack" to look like there is a $ at the beginning, like using a <div> right next to the input with the $ sign. And if you need the $ to be on the input value, after he triggers the action i would check if the value he uses is a valid number and then add the $ as the first char of the string. — Sebastian Ciocarlan
– Sebastian Ciocarlan, Commented Jul 20, 2021 at 6:41
Ya I can keep a $ placeholder and make $ appear after user enters the vaild value. — LoneWolf
– LoneWolf, Commented Jul 20, 2021 at 6:57
I looked up how ngx mask does it and it's a pain to do in one method github.com/JsDaddy/ngx-mask/blob/develop/projects/ngx-mask-lib/… — misha130
– misha130, Commented Jul 20, 2021 at 7:22

Valentin Roche · Accepted Answer · 2021-07-20 08:42:52Z

1

Like Sebastian Ciocarlan said you can remove the $ from the input and just allow numbers and commas if you don't need to store the $.

But instead of using a <div> you can use matPrefix from angular material (if you use it) to add $ in front of your input (or matSuffix if you want to put it at the end).

You can see an exemple here : https://material.angular.io/components/form-field/overview#prefix--suffix

answered Jul 20, 2021 at 8:42

Valentin Roche

4433 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LoneWolf Over a year ago

I can not keep the div/matprefix. I need to have $ inside text field. Now, what I have done is if user enters the consecutive , . or $ I am checking it against Regex and removing the entered character and make input field border red for a second to indicate its an invalid entry.

Collectives™ on Stack Overflow

Restricting user to enter specific values in input field angular 12

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related