Utilizing the ICollection interface within Angular 6

Just starting out with Angular and I could really use some guidance on how to implement an Angular Reactive Form that will generate the JSON result shown below:

{  
"firstName":"",   
"middleName":"",   
"lastName":"",
   "addressBook":[{
     "addressLine1":"",
     "addressLine2":"",
     "addressLine3":""
  },
 "addressBook":[{
     "addressLine1":"",
     "addressLine2":"",
     "addressLine3":""
  }]
}

Here is the structure of the form I currently have:

this.userForm= this.fb.group({
        firstName: [],
        middleName: [],
        lastName: [],
        emailAddress: [],
        password: [],
        addressBook: this.fb.group({
            addressLine1: [],
            addressLine2: [],
            addressLine3: []
        })
    });

I am struggling with this. Any assistance would be greatly appreciated. Thank you!

Answer №1

  1. To obtain a javascript object, you can utilize getRawValue: this.userForm.getRawValue();.
  2. By passing that object to JSON.stringify(formObject);, you will obtain your json.

getRawValue

Retrieve all values regardless of their disabled status. The value property is the most effective way to access the value of the group as it excludes disabled controls within the FormGroup.

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

How can Multer library be effectively utilized to manage exceptions in NestJS controllers?

While working on creating a service to upload specific files from a Post multipart/form-data request, I came across an easy way to validate the fields count and name sent using the FileInterceptor decorator from @nestjs/platform-express. However, I'm ...

Different tsconfigs assigned to various directories

In my project, I am using Next.js with TypeScript and Cypress for E2E tests. The challenge I am facing is configuring tsc to handle multiple configs for different folders. The tsconfig.json file in the project root for Next.js looks like this: { "c ...

Is it possible to have a Heroku host that supports both an Angular client and an express server within

I currently have my Express server and Angular web app hosted on Heroku using two separate app folders. This setup requires me to pay for two hobby accounts. I am considering merging the two projects together, but I am unsure if this would have any negati ...

What is the best way to send an observable with parameters through @Input?

The objective is to transfer an http request from Component 1 to Component 2 and initialize its parameters on Component 2. Here is a pseudo code representation of my approach: Component 1 HTML <app-component-2 [obs]="obs"></app-component-1> ...

Add the specified HTML tag to the existing document. An error has occurred: HierarchyRequestError - The action would result in an invalid node

During my testing of a React/TypeScript project using Jest + Enzyme, I encountered an issue when trying to append an HTML tag. The error occurred with the following unit test code: const htmlTag: HTMLElement = document.createElement('html'); htm ...

Troubleshooting problem with iPhone X responsiveness

Struggling with responsive issues on iPhone X. Issue is only appearing on actual device. Any tips for fixing this? I'm facing an issue where the website looks good and responsive on all devices in Chrome's responsive view. But when I access it th ...

Navigating a text input field in a NextJS application

Having trouble with handling input from a textarea component in a NextJS app. This is the structure of the component: <textarea placeholder={pcHld} value={fldNm} onChange={onChangeVar} className="bg-cyan-300" ...

What is the best way to integrate my Angular keycloak setup with an idphint attribute?

I have successfully integrated the angular keycloak adapter from https://www.npmjs.com/package/keycloak-angular to connect with our keycloak server. Currently, I am exploring the idphint attribute to redirect the request to a different identity provider. ...

Encountering a hiccup with dependencies during the transition to Angular 9 with jodit-angular

Encountering the following error when attempting to execute the command npm install after migrating Angular to version 9. Error npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-pro ...

Is there a way to integrate a calendar feature within an Angular 2 application?

I am brand new to Angular 2 and have a question: I need to integrate a calendar into a page where users can add events. Something similar to the following example: I'm unsure if the angular material calendar project is designed for Angular 2 or for ...

How to prevent right-clicking on an entire website using Angular, not just specific pages

I have been searching for a solution to disable right-click on my entire Angular 2+ application, but all I can find are solutions that only work for specific components such as, <someSelector appDisableRightClick></someSelector> Where "someSel ...

Issue with detecting undefined in a nested function using Typescript

Examining the code snippet provided below, focus on the test getter. Why is it that const name = this.person.name does not result in an error, while const processPerson = () => this.person.name does generate an error? interface Person { name: string; ...

What is the best way to transfer the variant property of the material-ui TextField when using a higher-level React component?

I'm encountering difficulties with typing... Essentially, I have a wrapper React component for the @material-ui TextField but I am struggling with getting the typings correct for the variant property. Here's the main problem. Using @material-ui ...

HTML: Mark the chosen hyperlink or tag

In my HTML page, I am looking to keep the link selected when it is clicked on. Here is the initial HTML code: <table class="main-dev"> <tr> <td> <a class='titleForm' style="cursor:pointer"> ...

Node is experiencing difficulty incorporating the AWS DynamoDB package into the project

Important Note: Although AWS SAM and DynamoDB are mentioned here, this question is primarily related to the AWS JavaScript SDK, or potentially just a Node/NPM query at its core. It should be answerable by anyone experienced in developing Node/JavaScript ap ...

Can a single data type be utilized in a function that has multiple parameters?

Suppose I have the following functions: add(x : number, y : number) subtract(x : number, y : number) Is there a way to simplify it like this? type common = x : number, y : number add<common>() This would prevent me from having to repeatedly define ...

The property "props" is not recognized within the context of type PropType

Within my component, I am receiving a prop ("author") from a parent component. Although I have defined the prop type as "AuthorProps", I am getting an error stating Property 'author' does not exist on type 'AuthorProps', even though the ...

Encountering problems with displaying the index value in *ngFor directive in Angular 5

I am encountering a problem with rendering the index of *ngFor directive for a specific scenario as described below. Suppose we have an array of objects like this: this.temp = [ {name:'John',age:24,visibility:'visible'}, {name:&ap ...

``There is an issue with Cross-Origin Resource Sharing (CORS) in a Node.js application utilizing TypeScript

I've encountered some issues with my application, specifically regarding CORS. I suspect it may be due to a misconfiguration on my server. The problem arises when I attempt to create a user in my PostgreeSQL database via the frontend. I have a tsx com ...

Is there a way to incorporate the "Handoff to Human" feature in a Microsoft Teams bot app by utilizing the Teams Toolkit? Can this functionality be implemented using TypeScript?

Can someone assist me with figuring out how to incorporate the "handoff conversation to human agent mechanism" in my project using TypeScript, Microsoft Bot Framework, and Teams Toolkit? ...