How to pass form field values in the body while making a http post service call

Question

Working on Angular http post service call, and have the api from a java service, to get the response from this service i will have to pass data/request parameters to the url, which i am doing via giving a var called body and then passing this with url

I am using angular reactive forms, and from the form fields here i want to send the request parameters to the body Like when the user fills the form he submits and this goes as a request and he gets a certain data after calculation from these fields as response

This is my service call where i am passing hard coded values, but here how could i pass the formcontrolname values to the body ???

    getPoll(): Observable<PollData[]> {
  const headers = new HttpHeaders({ 'Content-Type': 'application/json'});

  let body = '{"auth": { "accesskey": "", "signature": "" }, "data": { "v_age": 0, "v_rto_name": "Delhi East: Anand Vihar", "aa_status": false, "tax_type":"IGST","debug_flag":false }}';
  return this.http
  .post<PollData[]>(this.apiUrl + this.premiumUrl, body, { headers: headers })
    .pipe(
      tap(data => console.log('getPoll: ' + JSON.stringify(data))),
      catchError(this.handleError)
    );
}

When i pass the hard coded values i get a response, but how could i make it dynamic to be loaded from the reactive form fields.

Answer 1

You can pass your form values as a parameter inside your component service call.

submitForm() {
 this.yourService.getPoll(this.yourForm.value).subscribe(...);
}

Get the parameters in your getPoll function and

getPoll(yourFormValues): Observable<PollData[]> {
  const headers = new HttpHeaders({ 'Content-Type': 'application/json'});

  let body = '{"auth": { "accesskey": "", "signature": "" }, "data": { "v_age": yourFormValues.v_age, "v_rto_name": yourFormValues.v_rto_name, "aa_status": yourFormValues.aa_status, "tax_type":yourFormValues.tax_type,"debug_flag":false }}';
  return this.http
  .post<PollData[]>(this.apiUrl + this.premiumUrl, body, { headers: headers })
    .pipe(
      tap(data => console.log('getPoll: ' + JSON.stringify(data))),
      catchError(this.handleError)
    );
}