Issue: Invalid parameter: 'undefined is not a numeric value' for DecimalPipe

Here is the HTML input code that I am using: 

<input class="number " type= "text"  pInputText [readonly]="" formControlName="id" [required]="" plmNumberFormatter [value]="data?.id   | numberPipe" />

However, when I place the cursor on the input field, it displays 'undefined' as its value.

This is the TypeScript code snippet:

ngOnInit() {
    this.form = this.createForm();
    this.keys.split(',').forEach(item => {
      set(this.data, item, null);
    });

Additionally, this is the code for my custom pipe:

transform(value: number | string, fractionSize?: number): string {
      const numberValue = transformToNumber(value, this.profile.getCurrentProfile());
    let retNumber = Number(numberValue);
      return this.decimalPipe.transform(retNumber,  this.profile.getDigitsInfo(), this.profile.getLocale());
  }

I am facing an issue where the input value is not displaying correctly. Can you help me identify the problem?

Angular version being used: 7.3.9

angulartypescriptpipe

Answer №1

The proper way to initialize data is by declaring it first, as shown below:

...
public data: object = {}
...

constructor() {
    this.form = this.createForm();
    this.keys.split(',').forEach(item => {
        set(this.data, item, null);
    });
    this.data = { ...this.data };
}

It is crucial to note that a new reference to the data object should not be created. Angular monitors reference changes, making it necessary to create a new reference if needed.

When it comes to the HTML code:

<input class="number " type= "text"  pInputText [readonly]="" formControlName="id" [required]="" plmNumberFormatter [value]="data.id | numberPipe" />

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

What are the best ways to improve the efficiency of my filtering function

Currently, I'm working on a project involving Angular, NestJS, GraphQL, and MongoDB. I have created a modal component for filtering data that contains multiple fields. However, I am not confident that the code I wrote follows best practices and am see ...

node.jsangularmongodbnestjsfiltering

Customize the text displayed in a dropdown menu in Angular Material based on the selection made

I am working with a multi-select dropdown menu that includes an option labeled "ALL" which, when selected, chooses all available options in the list. My goal is to display "ALL" in the view when this option is chosen or when the user manually selects all t ...

javascriptangulartypescriptangular-materialmat-select

Issue with Angular-cli: typescript files not being generated when using the --dev option

Currently using angular-cli version 1.0.0-beta.14 with node version 6.6.0 on a Windows 32 bit x64 operating system. This setup utilizes the webpack version of angular-cli and I can successfully use ng build to compile. The output of ng build indicates that ...

javascriptangularangular-cli

When using Angular's .navigateByUrl() method, it successfully navigates to the desired page, however the html content is not

Whenever I try to navigate to the home page after logging in, I encounter an issue. I have a navbar <app-header></app-header> with two links - one for signing up and another for logging in. After successfully logging in, my goal is to navigate ...

angulartypescripthttp-redirectangular-ui-routerangular2-routing

How can I resolve a route error after converting typescript to es5 in an Angular2 example?

I'm currently diving into the world of Angular2 and exploring how to convert TypeScript to ES5. You can find detailed instructions in this documentation: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html Upon running the ES5 code, I encountered ...

angular

"Implementation issue in Node.js route causing failure to parse valid JSON data

Recently started learning node.js and facing an issue while trying to pass a JS object from Angular2 to my node.js route. The error message I keep getting is "unexpected token blah blah at index 0" from the native object parser. The object reaches my node ...

node.jsangularroutes

Storing information from a mat-select element in MongoDB database

I have a collection of Players and Teams. I want to assign players to teams. In my HTML, I create a Team form where users can select players to load: <mat-form-field> <mat-select placeholder="Goalkeepers" formControlName="goalkeeper"> & ...

node.jsangularmongodbexpress

NextJs Route Groups are causing issues as they do not properly exclude themselves from the app's layout.tsx

As far as I know, the layout.tsx in the app directory serves as the root layout. To customize the layout structure for specific segments, you can use Route Groups. More information can be found here. In this setup, any page.tsx file inside a directory nam ...

reactjstypescriptnext.js

Issue with sending functions to other components in Angular

I'm currently facing an issue with passing functions to other objects in Angular. Specifically, I've developed a function generateTile(coords) that fills a tile to be used by leaflet. This function is located within a method in the MapComponent. ...

javascriptangularleaflet

Issues with applying panelClass on panels in ng2-bootstrap library for Angular 2

In the ng2-bootstrap documentation, it mentions a panelClass annotation that can be used for panels. However, I am having trouble getting it to work properly. Here is the code I am using: <accordion> <accordion-group [panelClass]="panel-primary" ...

angularng2-bootstrap

Declaring types in NGRX Effect V10 has changed since classes are no longer used, causing types to not be inferred as easily

After the V10 upgrade to NGRX, there seems to be a change where passing a type of Action to the effect is no longer possible. As Actions are now declared as functions instead of classes, I'm wondering if there's still a way to handle this in V10? ...

angularngrxngrx-storengrx-effects

Is there a way to dynamically shift arrow key focus onto buttons in Angular using the left and right arrow keys?

I am facing an issue where pressing the arrow keys left and right does not focus or allow me to navigate through these buttons using the arrow keys. However, when checking the keycode values, they are printed according to the key pressed. I would like to k ...

htmlangulartypescriptrxjs

Can you explain the use of parentheses in a typescript type when defining a key?

Could someone provide an instance of an object that matches the TypeScript type below? I'm a bit confused because I've only worked with interfaces before and have only seen square brackets. type Hash = { (data: Uint8Array): Uint8Array blockLe ...

typescript

PlayWright - Extracting the text from the <dd> element within a <div> container

Here is the structure I am working with: <div class="aClassName"> <dl> <dt>Employee Name</dt> <dd data-testid="employee1">Sam</dd> </dl> </div> I am attempting to retrie ...

node.jstypescriptplaywright-testplaywright-typescript

Creating an enum in TypeScript can be accomplished by using the enum

What transformations do enums undergo during runtime in the TypeScript environment? Fruit.ts enum Fruit {APPLE, ORANGE}; main.ts let basket = [Fruit.APPLE, Fruit.ORANGE]; console.log(basket); The resulting main.js file remains identical to the .ts ver ...

typescript

What is the best way to implement a dynamic mask using imask in a React

I have a question regarding the implementation of two masks based on the number of digits. While visually they work correctly, when I submit the form, the first mask is always selected. How can I resolve this issue? My solution involves using imask-react ...

reactjstypescriptnext.jsimaskjs

Using Angular2 Pipes to display raw HTML content

I am currently working on developing a custom pipe in Angular2 that is capable of outputting raw HTML. My goal is to take input with newlines and convert them into HTML line breaks. Can anyone guide me on how to display raw HTML from an Angular2 pipe? Bel ...

angular

Navigating through various Angular 7 projects in Express using JWT authentication and role-based routing

In my Angular 7 project, I have developed multiple applications for different roles such as admin, user, and editor. Each role has its own set of components and views. When a logged-in user accesses the application, they are directed to their respective r ...

node.jsangularexpressjwtexpress-jwt

Checkbox with an indeterminate state in Angular

I'm currently working on updating an AngularJS (1.5) setup where a parent checkbox becomes indeterminate if one of its children is selected, and all the children are selected if the parent is selected. My main challenge lies in converting the old ES5 ...

javascriptangularformscheckbox

What is the best way to pass only the second parameter to a function in TypeScript?

Let's consider a TypeScript function as shown below: openMultipleAddFormModal(commission?: Commission, people?: People): void { // some data } To make a parameter optional, I have added the Optional Chaining operator. Now, how can I modify the code ...

javascripttypescript