Error posting data from form into api url in Angular

Question

I am trying to post my form data into a web api, I have a service for this but for some reason I get a 404 bad request back all the time? My service is:

postIncidents(): Observable<any> { 
  return this.http.post<any>(this.serviceApiUrl, {})
    .pipe(catchError(this.handleError));
}

Component.ts

import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Request } from '../../models/request.model'
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AppComponent } from '../../../app.component';
import { ServicenowService } from '../../services/servicenow.service';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse, } from '@angular/common/http';



@Component({
  selector: 'app-service-request',
  templateUrl: './service-request.component.html',
  styleUrls: ['./service-request.component.scss']
})
export class ServiceRequestComponent implements OnInit {


  public loading = false;

  private customer_id = 7; /// this.appComponent.customer_id;

  serviceForm;

  u_destination_country = [
    { name: 'Choose an option' },
    { name: 'United Kingdom', },
    { name: 'United States of America', },
    { name: 'Russia', },
    { name: 'Moscow', },
    { name: 'Africa', },
  ];

  users = [
    { id: 'Select an option', },
    { id: '1', },
    { id: '2', },
    { id: '3', },
  ];

  devices = [
    { id: 'Select an option', },
    { id: '1', },
    { id: '2', },
    { id: '3', },
  ];

  constructor(private service: ServicenowService,
    private appComponent: AppComponent,
    private router: Router,
    private http: HttpClient

  ) {
  }

  ngOnInit() {
    this.serviceForm = new FormGroup({
      customer_id: new FormControl(this.customer_id),
      //u_caller_id: new FormControl(this.users[0], Validators.required),
      s_id: new FormControl('', Validators.required),
      u_destination_country: new FormControl(this.u_destination_country[0], Validators.required),
      u_phone_number: new FormControl('', Validators.required),
      //u_serial_number: new FormControl(this.devices[0], Validators.required),
      short_description: new FormControl('', Validators.compose([
        Validators.required,
        Validators.minLength(5),
        Validators.maxLength(80)
      ])),
      u_message_description: new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    var data = "s_id=" + this.serviceForm.value.s_id;
    this.service.postIncidents().subscribe((data) => {});
    (error) => {
      console.log(error);
    }
    console.log("data has gone");
    this.loading = false;
    if (data)
    this.router.navigate(['/incident/confirmation']);
    else 
    this.router.navigate(['/']);
  }
}

The post request must have the s_id and customer_id. Just for the sake of getting it working I am only sending the s_id for now as the customer_id is a hidden input field.

The customer_id is just a hidden value on the form.

I am super confused any help? Thanks

You are not sending s_id, you are sending an empty object {} in yourservice. data is not what you send, it is the data answered. And if you have a 404, check if you can call the same url in your browser, the problem may come from your server. — Cyril
– Cyril, Commented Mar 7, 2019 at 13:43

Askirkela · Accepted Answer · 2019-03-07 13:46:13Z

1

You never use your data variable, it should be a parameter for your postIncidents(id: number) and be used in the api call :

postIncidents(id: number): Observable<any> { 
  return this.http.post<any>(this.serviceApiUrl, id)
    .pipe(catchError(this.handleError));
}

and then in your component:

onSubmit() {
    var data = "s_id=" + this.serviceForm.value.s_id;
    this.service.postIncidents(data)
    .subscribe(
        (data) => { // success
            if (data)
                this.router.navigate(['/incident/confirmation']);
            else 
                this.router.navigate(['/']);
        },
        (error) => console.log(error), // error
        () => { // complete
            console.log("data has gone");
            this.loading = false;
        }
    );
  }

answered Mar 7, 2019 at 13:46

Askirkela

1,21911 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sole Over a year ago

what does the postIncidents(id: number) refer to?

Askirkela Over a year ago

It is just giving a number (your s_id) as a parameter for your service then using it in your http call

GaryB · Accepted Answer · 2019-03-07 14:47:31Z

1

you have to pass the data to the service function:

postIncidents(data): Observable<any> { 
  return this.http.post<any>(this.serviceApiUrl, data)
    .pipe(catchError(this.handleError));
}

onSubmit() {
    var data = "s_id=" + this.serviceForm.value.s_id;
    this.service.postIncidents(data).subscribe(response => {console.log(response});
    //rest of your code
}

If it not works I would be curious whats in your console.

answered Mar 7, 2019 at 14:47

GaryB

3841 silver badge9 bronze badges

Collectives™ on Stack Overflow

Error posting data from form into api url in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related