Angular2 Validate input using regexp

Question

I want to define quantity of symbols in my regex

_keyPress(ptrn: string, event: any) {
    const pattern = new RegExp(ptrn);
    const inputChar = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    const value = event.target.value;
    if (!pattern.test(inputChar) && !pattern.test(value)) {
      event.preventDefault();
      return false;
    }
  }

html:

<input (keypress)="_keyPress('[a-z]{,6}', $event)">

But it doesn't work if I use quantity quantifier. Who can say what's going wrong? https://plnkr.co/edit/fIVAvRJcubzD2SxZqlTY?p=preview

Try setting 0 as the minimum value - [a-z]{0,6}. Better with anchors to require the full string match - ^[a-z]{0,6}$ — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Jun 12, 2017 at 10:17
is it comming in _keyPress function you tried to console log in the function — mayur
– mayur, Commented Jun 12, 2017 at 10:27

Nehal · Accepted Answer · 2017-06-12 18:38:25Z

1

First of all event.charCode returns number between 97 and 122 for a-z. So, the pattern.test(inputChar) test always fails because you are trying to compare digits to alphabets. So, change inputChar to following:

const inputChar = String.fromCharCode(event.key ? event.which : event.key);

Also, value needs to be updated with the next key entered by user:

const value = (event.target.value) + inputChar;

I am assuming you are trying to restrict the user from enter any keys except a-z and only allowing them enter up to 6 alphabets. Therefore, the final test needs an || flag instead of &&, because the input should be allowed when both of tests pass, not just when one of them pass.

if (!pattern.test(inputChar) || !pattern.test(value)) {
      event.preventDefault();
      return false;
    }

Here's the Plnkr demo forked from yours.

answered Jun 12, 2017 at 18:38

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Angular2 Validate input using regexp

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related