Identifying digits and letters by processing individual user input

Question

Identifying digits and letters by processing individual user input

I am facing a coding challenge with the following code snippet:

<div class="form-group">
 <label for="txtName">Name</label>
  <input type="text" pInputText class="form-control" id="txtName" 
         formControlName="name">
   <div *ngIf="!utenteform.controls['name'].valid && 
               utenteform.controls['name'].dirty" class="alert alert danger">
                 You can't skip this field
   </div>
</div>

My goal is to detect whether the user is inputting a letter or a number, and if a number is entered, I need to display an alert.

I came across the "ngKeyDown" event, but I'm unsure how to utilize it to pass each individual key pressed to a method that can analyze the input.

angular typescript

Answer 1

Answer №1

Check out this example that may help you: stackblitz

<input (keydown)="onKeydown($event)">

onKeydown(event) {
  if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
    alert("input was number");
    event.preventDefault(); // prevent numbers
  }
  if (event.keyCode >= 65 && event.keyCode <= 90) {
    alert("input was letter");
  }
 }

Answer 2

Check out this example that may help you: stackblitz

<input (keydown)="onKeydown($event)">

onKeydown(event) {
  if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
    alert("input was number");
    event.preventDefault(); // prevent numbers
  }
  if (event.keyCode >= 65 && event.keyCode <= 90) {
    alert("input was letter");
  }
 }

Identifying digits and letters by processing individual user input

Answer №1

Similar questions

The index access type cannot be used with T[Key extends keyof T]

What are the steps for incorporating the AAD B2C functionality into an Angular2 application with TypeScript?

The assignment of Type Program[] to a string[] is not valid

What is the process for embedding images in Angular that are stored in a directory other than assets?

Transforming an Observable to a boolean using RXJS

What is the Time and Location of the Angular CLI Installation on the Local Machine?

Enhancing React TypeScript: Accurate typings for Route's location and children attributes

Is it necessary to include a package.json file in the /src directory when creating a package?

The term "primordials is not defined" is a common error

The object's key values were unexpectedly empty despite containing data

Element without style

What is the best way to extract data from an [object Object] and store it in an Array or access its values in Angular?

Which one should I prioritize learning first - AngularJS or Laravel?

Steps to trigger a modal using an effect and automatically close it upon receiving a specific dispatched action

React Date-Picker is unable to process a date input

Getting foreign key data from Django to display in Angular

Deleting specialized object using useEffect hook

Error: Found an unconventional token "e" in JSON data at position 1 during parsing in JSON.parse function

Encountering issues during the installation of the Angular/CLI software

The module does not contain 'toPromise' as an exported member in rxjs version 5.5.2