How to Convert a FormGroup value to an Interface in Angular 2

I need assistance converting the content of my FormGroup value into an interface that will be used for sending data to my Web Api.

The interface I am using is defined as follows:

export interface MoneyItemI {
  Description: string;
  Amount: number;
}

This is how my submit method looks:

onSubmit() {
    let jsonString = JSON.stringify(this.itemForm.value);
    let mi = <MoneyItemI>JSON.parse(jsonString);
}

Upon inspection, I have observed that although an object is created with JSON.parse, it does not match the expected structure of MoneyItemI. For instance, the 'Amount' property appears to be treated as a string instead of a number.

How can I ensure that I create a valid interface based on the value of my FormGroup?

Answer №1

Are the Amount and Description properties of this.itemForm.value accurate before executing

JSON.stringify(this.itemForm.value)
?

If they are correct, you can simply use:

let moneyInfo = <MoneyItemI>this.itemForm.value;

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

Issue with Next.js: Callback function not being executed upon form submission

Within my Next.js module, I have a form that is coded in the following manner: <form onSubmit = {() => { async() => await requestCertificate(id) .then(async resp => await resp.json()) .then(data => console.log(data)) .catch(err => console ...

Is it possible to transform JSON data into Prometheus-compatible format?

I received a JSON response from Rundeck at http://localhost:4440/metrics/metrics and I'm looking to convert this JSON into Prometheus format. I attempted to utilize an external plugin like github.com/mtulio/rundeck-exporter, but encountered issues wh ...

Using tabs within a textarea element in Typescript/Angular

I am struggling to find a solution for the issue I'm experiencing with tabs inside a textarea. Every time I press the tab button, it jumps to another textarea. I have found some solutions written in JavaScript and jQuery, but unfortunately, I can&apos ...

How to Generate a JPG File from a Leaflet Map in Angular 4 using Typescript

I am developing a custom application using Angular4 that involves integrating leaflet maps. One of the requirements is to export the current view of a map as a JPG image, capturing only the map with markers and polylines - similar to taking a screenshot. ...

typescript - instantiate an object using values stored in an array

Assume we have a model defined as follows. export interface Basicdata { materialnumber: number; type: string; materialclass: string; } We also have an array containing values that correspond directly to the Basicdata model in order, like this: ...

The clash of dependencies in Transloco

Currently, I am in the process of integrating the Transloco package into my Angular Ionic project that I compile using VSCode. My Angular version is 13.3.0. Upon executing the installation command: ng add @ngneat/transloco I encounter a series of terminal ...

Optimal technique for adding elements to the DOM using ngFor

My application features a websocket connected to an ngFor loop that populates data from approximately 100 records. Each entry in the list has a button with a click event attached, triggering the creation of a loading spinner via a 'div' element w ...

Tips for extracting data from a nested JSON object while utilizing GSON library on Android

Here is an example of how my JSON response appears: [{"order":-1,"artist":[{"name":"Hey"}]},...] I am seeking guidance on how to extract the name from the artist object using GSON. Initially, I attempted to achieve this task utilizing the following code ...

Tips for retrieving a string instead of an Observable in @angular/http

I'm currently integrating Angular 4 with .NET Core Web API. The Web API is providing a CustomerName as a string based on the Id given. Here is the service method in Angular 4. I know that angular/http needs to return an Observable due to it being an ...

How can I retrieve the entire string when reading a JSON stream using boost::asio?

Implementing Boost to read a TCP stream is proving to be quite the challenge. The stream I'm dealing with has a specific format, like so: "{\"animationValues\":{\"mouth_rightMouth_stretch\":0.0000000000000000,\"mouth_leftMout ...

What about incorporating unique images with custom HTML input tags?

Hand Diagram Hey there! I'm currently working on a small project using Angular. I was wondering if it's feasible to add tags to an image and prompt the user for input when a tag is clicked? For example, in the image above, I'd like to plac ...

Save solely the timing information in Mongodb

Looking for advice on storing time values in MongoDB? Users will be inputting times as strings, such as "05:20", and you need to convert and store this data correctly. Any suggestions on how to achieve this? I've attempted using the Date object with ...

Reactjs - The createStore function is unable to identify the reducer when TypeScript is being used

I recently delved into the world of Reactjs and Typescript and attempted to create a todo item project. However, I encountered an error in VSCode when trying to call createStore that I am struggling to resolve. Any assistance on this matter would be great ...

What was the process for implementing the lexer and parser?

My journey into the depths of programming languages led me to explore how TypeScript is implemented, prompting me to venture into its Github repository. Within the language's source code under /src/compiler, I stumbled upon intriguing files like scan ...

"Improve your Angular ngrx workflow by utilizing the sandbox pattern to steer clear of

Currently, I'm trying to determine whether my implementation of the ngrx and sandbox pattern is effective. Here's the issue I'm facing: getFiles(userId: number, companyId: number) { this.fileService.getFiles(userId, companyId).subscribe(re ...

Is it necessary to only override the monospaced font?

Can the monospace font in Angular Material be customized for just the <code>foo</code> blocks? I want to use a font where the number zero 0 looks distinct from the letter oh O. ...

What are the steps to save a JSON array into a MySQL database using Java?

I need to save the JSON Array below into a MySql Database. My goal is to sync this data with MySql DB from an android Application. [ { "DATE":"Oct 15, 2015 7:09:23 AM", "LNG":"75.124", "LAT":"15.3647066", "IMEI":"2", ...

Getting a byte/uint8 array marshaled as a JSON array in Go: A step-by-step guide

In my struct, there is a member of type []uint8 and when I use json.Marshal to write it, the issue arises where it treats the uint8s as characters instead of numbers, resulting in a string output rather than an array. If the member were a []int, I could m ...

Display text inputted by the user in a paragraph using Angular upon clicking a button

Currently, I am diving into the world of Angular and facing a specific challenge: My goal is to have an input field for text, a button next to it, and then a paragraph tag. What I aim to achieve is to display the text from the input field in the paragraph ...

What is the best approach for organizing type declaration files when using Vite in a React TypeScript application?

Currently in the process of transitioning my application from Webpack to Vite. Seeking guidance on the optimal method for including the following: /// <reference types="vite/client" /> There is an existing file types/global.d.ts, and I&ap ...