What could be the reason why the keypress event doesn't seem to be functioning properly on

Currently, I am utilizing Angular and the Ionic framework. Here is a snippet of the HTML code that I have written:

<div><ion-input type="text" id="phoneNumber" [(ngModel)]="phoneNumber" (keypress)="phoneNumericCheck($event)" [disabled]="isSendParamDisabled" maxlength="11" placeholder="{{ 'TEXT.INPUT_FIELD_PHONE_NUMBER' | translate }}"></ion-input></div>

<ion-input [(ngModel)]="authNumber" type="text" id="Auth" maxlength="6" (keypress)="authNumericCheck($event)" placeholder="{{ 'TEXT.INPUT_FIELD_AUTH_NUMBER' | translate }}"></ion-input>

I have noticed that I used different functions in the two keypress events, with one working for authNumber but not phoneNumber.

Strangely, when only one keypress event is used, it functions correctly. Why does this happen?

Both event functions contain the same contents:

public phoneNumericCheck(event: any) {
    const pattern = /[0-9.,]/;
    let value = String.fromCharCode(event.charCode);
    let success = pattern.test(value);
    if(!success) {
      event.preventDefault();
      this.alertAboutOnlyNumeric();
    }
  }

Despite this, there are occasions when this event does not work...the reason behind it remains unknown to me.

angulartypescriptionic-frameworkeventskeypress

Answer №1

Perhaps consider approaching the phone input differently.

<ion-input type="tel" autocomplete formControlName="phone"></ion-input>

this.registrationForm = this.fb.group({
  phone: ['', [Validators.required, Validators.pattern(PhoneNumberRegex)]],
});

When defining PhoneNumberRegex, you have the option to specify a particular phone number format (such as shown here) or simply use ^[0-9]*$

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the useState function individually for every object within an array

After clicking the MultipleComponent button, all logs in the function return null. However, when clicked a second time, it returns the previous values. Is there a way to retrieve the current status in each log within the map function? Concerning the useEf ...

javascriptreactjstypescript

implement a solution in Ionic 4 Angular 6 that triggers a function only when all the observables in a loop have

In my code, I have a function named getDevices(). This function is responsible for fetching an array of devices. After getting this array, the code iterates through each device and calls another function called updateToServer(). The purpose of updateToServ ...

angulartypescriptionic-frameworkpromiserxjs

How can Angular CLI prevent the submission of an HTML form unless a previous option has been selected

I am currently working on a form that contains select fields with various options pre-populated. <form [formGroup]="selectVehicleForm"> <select formControlName="Manufacturer"> <option *ngFor='let ...

htmlangulartypescriptformsselect

When it comes to TypeScript, there is a limitation in assigning a value to an object key with type narrowing through the

I created a function called `hasOwnProperty` with type narrowing: function hasOwnProperty< Obj extends Record<string, any>, Prop extends PropertyKey, >( obj: Obj, prop: Prop, ): obj is Obj & Record<Prop, any> { return Object ...

javascripttypescript

Angular error TS2322 arises when attempting to assign a type of 'Observable<{}>' with the share() operator

Currently diving into Angular 5, I've been exploring the Observable/Observer pattern to facilitate event sharing and data changes among subscribers. Below is a snippet of the code in question: ... @Injectable() export class NidoService { ... eve ...

javascriptangulartypescriptobservableobserver-pattern

The function signature '({ articles }: Props) => JSX.Element' does not match the type 'NextPage<{}, {}>'

Recently, I've decided to delve into the world of React.js and Next.js after being familiar with Vue.js. Encountering a peculiar typescript error has left me scratching my head, but surprisingly, the code actually compiles despite Visual Studio Code w ...

reactjstypescriptnext.jstsx

Typescript raises a error notification regarding the absence of a semicolon when importing a JSON module

Attempting to import a local JSON object into my Vuex store using const tree = import('@/articles/tree.json');. The setting "resolveJsonModule": true, has been enabled in my tsconfig.json and it loads successfully, however NPM is flooding the out ...

jsontypescriptvue.jsnpmwebpack

Tips for dynamically adding an object to the formArrayName in Angular reactive forms

Currently, I am facing an issue with loading my array of objects response into a multiselect using ng-select. The structure of my response data looks like this: The formModel setup in my code is as follows: clientForm = this.fb.group({ custom : this. ...

angularangular-reactive-formsangular-ngselect

Setting up event listeners from a string array (using PIXI.js)

Hey there! I've encountered a bit of an interesting challenge that could easily be resolved by duplicating the code, but where's the fun in that? This project is more of an experiment for me, just to prove that I can do it. However, the idea has ...

javascripttypescriptcallbackpixi.js

Exploring Jasmine and Karma for testing Angular 5 HTTP requests and responses

I am brand new to the concept of Test-Driven Development (TDD) and I am currently in the process of debugging a complex Angular 5 application for the company I work for. The application is functioning without any issues, but now I need to incorporate test ...

javascriptangularjasminekarma-jasmine

Efficient Typescript ambient modules using shorthand notation

Exploring the code snippet from the official module guide, we see: import x, {y} from "hot-new-module"; x(y); This syntax raises a question: why is 'x' not within curly brackets? What does this coding structure signify? ...

typescript

Utilize TypeScript to retrieve the enumeration values as a parameter through a method that employs a generic enum type

Is there a way to retrieve all values of an Enum (specified as a parameter or generic) and return them in a list? Additionally, if the user has a specific role, I only need to retrieve certain Enum values provided as a parameter. I had the idea of groupin ...

typescriptenumsoptional-parametersfunction-definitiongeneric-type-parameters

Tips for simulating localStorage in TypeScript unit testing

Is there a method to simulate localStorage using Jest? Despite trying various solutions from this post, none have proven effective in TypeScript as I continue encountering: "ReferenceError: localStorage is not defined" I attempted creating my ...

reactjstypescriptnpmjestjslocal-storage

Incorrectly selecting an overload in a Typescript partial interface can lead to errors

My attempt to define an overload for my function using a Partial interface overloading is causing typescript to select the incorrect overload interface Args { _id: string; name: string; } interface Result { _id: string; name: string; } function my ...

typescript

Using the Angular Slice Pipe to Show Line Breaks or Any Custom Delimiter

Is there a way in Angular Slice Pipe to display a new line or any other delimited separator instead of commas when separating an array like 'Michelle', 'Joe', 'Alex'? Can you choose the separator such as NewLine, / , ; etc? ...

angulartypescriptangular10

Using TypeScript to specify the return type of a non-mutating extension function from an external module

Imagine utilizing an external package named "foo". This package's primary export is an object containing an .extend() method that enables functionality addition by generating a derived object (while leaving the original untouched). The process typical ...

typescripttypesimmutabilityextendsmodule-augmentation

Incorporating a CSS Module into a conditional statement

Consider the following HTML structure <div className={ `${style.cell} ${cell === Player.Black ? "black" : cell === Player.White ? "white" : ""}`} key={colIndex}/> Along with the associated CSS styles .cell { ...

cssreactjstypescript

Is it possible to replicate a type in TypeScript using echo?

Is there any equivalent in TypeScript to the following code snippet? type TypeA = { x: number }; printType(TypeA); I have found a method that consistently enables TypeScript to provide a type description. const y = { x: 1, z: 'hello', }; ...

typescript

Does anybody have information on the Namespace 'global.Express' not having the 'Multer' member exported?

While attempting to set up an endpoint to send a zip file, I keep encountering the following error: ERROR in ./apps/api/src/app/ingestion/ingestion.controller.ts:46:35 TS2694: Namespace 'global.Express' has no exported member 'Multer'. ...

node.jstypescriptexpressmulter

I am working on a project where I have a parent component that contains a textarea element. My goal is to dynamically adjust the height of this textarea

Is there a way to adjust the size of a textarea component in a child component? textarea.html <textarea style = "height"=150px></textarea> // The height is defined globally here xyz.html <app-textarea></app-textarea> // Looking ...

angular