Tips on transferring updated data to the API

I need to send modified values to an API and include the finalDate variable in the data. I am using reactive forms with a mat-stepper single form which is why I am using FormArray. Below is the code snippet:

  onSubmit() {
    const birthDateValue = (this.formGroup.get("formArray") as FormArray).at(0).get("birthDate").value;
    const birthDateValueControl = (this.formGroup.get("formArray") as FormArray).at(0).get("birthDate");
    const PeriodValue = (this.formGroup.get("formArray") as FormArray).at(1).get("period");
    // send age as date
    const date = new Date();
    const year = date.getFullYear() - birthDateValue;
    date.setFullYear(year);
    const finalDate = date.toISOString();
    //set value of carousel
    PeriodValue.setValue(this.myCarousel.slideCounter + 3);
    // send form as one object
    const formArrayData = this.formGroup.get('formArray').value;
    const data = formArrayData.reduce((prev, next) => ({
      ...prev,
      ...next
    }), {})
    console.log(data);

    this.service.calculate(data).subscribe(
      (res: any) => {
        console.log(res);
      },
      err => {
        console.log(err);
      }
    );
  }
}

Answer №1

Try utilizing a commonly used http library such as httpClient

https://angular.io/api/common/http/HttpClient

constructor(private httpClient: HttpClient) {}

public sendData() {
    return this.httpClient.post<any>('your.api.com', this.formgroup.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

Can a function be annotated in order to inform the TypeScript compiler that it has verified the type of a class property?

How can I annotate `readText` in the code snippet below to assure the compiler that `this.text` is of type `string` and not `string | undefined`? type MyResponse = { text: () => Promise<string>; }; class ResponseVerfier { response: MyRespons ...

Issue: Unable to locate module ' Stack trace: - /var/runtime/index.mjs when running Lambda function generated using Terraform and Node.js version 18 or higher

My Terraform setup involves a Lambda function with a Node.js version of >= 18, following the steps outlined in this helpful article. However, upon attempting to invoke the Lambda function, CloudWatch throws the following error: "errorType" ...

Deactivate and activate two buttons under the same condition (while entering information in forms) using Angular

Within my HTML form, there is a field labeled value. Alongside this field, there is an add button. When I click the add button, it duplicates the form field. My code is set up so that when I input a value (let's say 40) into the form field, then click ...

Issue with Vue @Watch not properly recognizing changes in a boolean value

I'm currently experimenting with watch functions in vue-ts. I have configured a watch function that is supposed to trigger whenever a Boolean variable's value changes, but for some reason, it's not triggering at all and I'm unable to de ...

Button for enabling and disabling functionality, Delete list in Angular 2

I am looking to toggle between the active and inactive classes on a button element. For example, in this demo, there are 5 buttons and when I click on the first button it removes the last one. How can I remove the clicked button? And how do I implement the ...

Conditional Skipping of Lines in Node Line Reader: A Step-by-Step Guide

I am currently in the process of developing a project that involves using a line reader to input credit card numbers into a validator and identifier. If I input 10 numbers from four different credit card companies, I want to filter out the numbers from thr ...

Combining two objects by aligning their keys in JavaScript

I have two simple objects that look like this. var obj1 = { "data": { "Category": "OUTFLOWS", "Opening": 3213.11, "Mar16": 3213.12, "Apr16": 3148.13, "May16": 3148.14, "Jun16" ...

Pointer Cursor in CSS

I am experiencing a strange issue. When I set the cursor attribute value directly as a string like return ( <Grid item> <Card sx={{ padding: "1rem", ":hover": { cursor: "pointer" ...

Utilize Typescript to inject types into a library

I have a code snippet that reads data from a JSON file and creates a type based on it, which is then used for further operations. import jsonData from './mydata.json' type CustomType = typeof jsonData .... This process ensures that the generate ...

The peculiar type intersection of 'string & {}'

There is a TypeScript syntax often seen in some libraries like this: type AriaRole = 'alert' | 'tree' | 'treegrid' | 'treeitem' | (string & {}); Can someone explain the meaning of string & {}? It represent ...

Utilizing RxJs operators in Angular: utilizing async pipe and tap does not fill data

Here is a code snippet I've been working on: This snippet is written in Typescript: isDataSearch = false; getDatacollectionByID() { const params = { id: <some random ID>, }; this.metaData = this.dataService.getDatacollectionByID(par ...

How can we toggle a function to expand or collapse fields generated in an ngFor loop?

One of my challenges involves managing a div that is repeated using *ngFor in Angular. This results in multiple divs on the page, each containing collapsible fields that can toggle. Essentially, I have nested collapsible fields within other collapsible fie ...

Choose particular text within the editorState

I'm in the process of developing a sophisticated text editor utilizing draftjs. Take a look at this basic codesandbox to get a better understanding of the issue at hand. One of the challenges I'm facing is with a helper function called getCurren ...

Implementing Express.js allows for the seamless casting of interfaces by the body within the request

I have created a similar structure to ASP.NET MVC and uploaded it on my github repository (express-mvc). Everything seems fine, but I am facing an issue with casting the body inside the request object to match any interface. This is what I am aiming for: ...

Removing validators in Angular forms after submitting the form and resetting it

I am currently working on an Angular app that includes a form. Whenever I click the submit button, the reset() function gets triggered on the form. However, after the reset() function is called, all inputs are marked as having errors. I have tried using fu ...

Troubleshooting engine malfunction in Angular 9 caused by FormGroup usage

Here is a sample code snippet of a component: export class BaseFormComponent implements OnInit { basicFormGroup: FormGroup; constructor( protected basicProviderService: BasicProviderService, protected formBuilder: FormBuilder, protected di ...

Removing white space between words in Angular component HTML files using TypeScript

Within my component.html file, I am utilizing an img tag with the image source value originating from an array. This array contains a property known as "name", which may consist of two or three words separated by spaces. How can I adjust the image src to m ...

Ways to create a method that can be overridden

Is there a way to declare a virtual method in TypeScript? I'm attempting to achieve something similar to the following: export abstract class SuperClass { public virtual enable(enableComponents: boolean): void { } } ...

Sending a function along with arguments to props in TypeScript

Encountering a peculiar error while executing this code snippet (React+Typescript): // not functioning as expected <TestClass input={InputFunction} /> And similarly with the following code: // still causing issues <TestClass input={(props ...

Troubleshooting Promise resolution issue within TestBed.compileComponents in Angular 2 testing

I'm currently in the process of developing a test module for a module within my Angular2 component that utilizes the templateUrl property. As a result, I need to make the TestBed.compileComponents async call to compile before conducting any testing. ...