Angular | Allow Only Numbers or Alphanumeric in Input Restrict Other Characters using Keypress Event

In this Angular tutorial, we’ll learn how to restrict a user from typing only Numbers or Alphanumeric characters in the Input form controls in Angular 10/9/8/7/6/5/4 application by binding the Keypress event.

Input Form controls can be used to mask and allow only specific values. For example, to get Customer ID we only want a user to enter numbers and for a username only alphanumeric characters are needed.

In this post, we’ll discuss how to add a mask on Input control to restrict a user from entering restricted values. For achieving this we’ll bind the key events on the input control to check keyCode and return true or false accordingly.

So let’s get started!

How to allow on Numbers or Alphanumeric Characters in Input?

[lwptoc]

Allow Only Integer Numbers [0-9] on Input Form Control in Angular

In the template HTML, add an Input control with a (keypress) event handler to call the keyPressNumbers() method

<input type="text" (keypress)="keyPressNumbers($event)" />

In the class add keyPressNumbers method

// Only Integer Numbers
  keyPressNumbers(event) {
    var charCode = (event.which) ? event.which : event.keyCode;
    // Only Numbers 0-9
    if ((charCode < 48 || charCode > 57)) {
      event.preventDefault();
      return false;
    } else {
      return true;
    }
  }

We need to check if .which or .keyCode is supported by the browser.

 

Allow Only Numbers [9.8] with Decimal (.) on Input Form Control in Angular

In the template HTML, add an Input control with a (keypress) event handler to call the keyPressNumbersDecimal() method

<input type="text" (keypress)="keyPressNumbersDecimal($event)" />

Update class with keyPressNumbersDecimal method

// Only Numbers with Decimals
  keyPressNumbersDecimal(event) {
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31
      && (charCode < 48 || charCode > 57)) {
      event.preventDefault();
      return false;
    }
    return true;
  }

 

Allow Only Alphanumeric [AB99] Characters on Input Form Control in Angular

In the template HTML, add an Input control with a (keypress) event handler to call the keyPressAlphaNumeric() method

<input type="text" (keypress)="keyPressAlphaNumeric($event)" />

Update class with keyPressAlphaNumeric method

// Only AlphaNumeric
  keyPressAlphaNumeric(event) {

    var inp = String.fromCharCode(event.keyCode);

    if (/[a-zA-Z0-9]/.test(inp)) {
      return true;
    } else {
      event.preventDefault();
      return false;
    }
  }

 

Allow Alphanumeric with Some Characters [19.a_a] on Input Form Control in Angular

In the template HTML, add an Input control with a (keypress) event handler to call the keyPressAlphaNumericWithCharacters() method

<input type="text" (keypress)="keyPressAlphaNumericWithCharacters($event)" />

Update class

// Only AlphaNumeric with Some Characters [-_ ]
  keyPressAlphaNumericWithCharacters(event) {

    var inp = String.fromCharCode(event.keyCode);
    // Allow numbers, alpahbets, space, underscore
    if (/[a-zA-Z0-9-_ ]/.test(inp)) {
      return true;
    } else {
      event.preventDefault();
      return false;
    }
  }

 

Conclusion

In above tutorial, we discussed how to mask or restrict characters like numbers, alphabets, or special characters, and combinations by using the keyCode and test method.