How to send form data to web api via Angular

Question

I have a form in Angular 6 and I have a table which gets data from a web api. Is it possible to send that form data to that web api? I have a mock web api url which is a get request. My code so far is:

Html form:

    <form class="form-horizontal" [formGroup]="serviceForm" (ngSubmit)="onSubmit()">
<div class="form-group mb-8">
   <div class="col-3 col-sm-12">
      <label class="form-label" for="u_caller_id">On behalf of this user: <sub class="text-secondary">*</sub></label>
   </div>
   <div class="col-4 col-sm-12">
      <select formControlName="u_caller_id" class="form-select" required>
      <option *ngFor="let user of users" [ngValue]="user">
      {{ user.id }}
      </option>
      </select>
      <div *ngIf="serviceForm.get('u_caller_id').errors && (serviceForm.get('u_caller_id').touched || serviceForm.get('u_caller_id').dirty)">
         <div *ngIf="serviceForm.get('u_caller_id').hasError('required')" class="mt-2 mb-2">
            <h6 class="text-error">This field is required</h6>
         </div>
      </div>
   </div>
</div>
<div class="form-group mb-8">
   <div class="col-3 col-sm-12">
      <label class="form-label" for="u_destination_country">Your location: <sub class="text-secondary">*</sub></label>
   </div>
   <div class="col-4 col-sm-12">
      <select formControlName="u_destination_country" class="form-select">
      <option *ngFor="let state of countries" [ngValue]="state">
      {{ state.name }}
      </option>
      </select>
      <div *ngIf="serviceForm.get('u_destination_country').errors && (serviceForm.get('u_destination_country').touched || serviceForm.get('u_destination_country').dirty)">
         <div *ngIf="serviceForm.get('u_destination_country').hasError('required')" class="mt-2 mb-2">
            <h6 class="text-error">This field is required</h6>
         </div>
      </div>
   </div>
</div>
<div class="form-group mb-8">
   <div class="col-3 col-sm-12">
      <label class="form-label" for="u_requester_phone_number">Phone number: <sub class="text-secondary">*</sub></label>
   </div>
   <div class="col-4 col-sm-12">
      <input class="form-input" type="text" id="u_requester_phone_number" placeholder="Enter phone number" type="number"
         formControlName="u_requester_phone_number" required>
      <div *ngIf="serviceForm.get('u_requester_phone_number').errors && (serviceForm.get('u_requester_phone_number').touched || serviceForm.get('u_requester_phone_number').dirty)">
         <div *ngIf="serviceForm.get('u_requester_phone_number').hasError('required')" class="mt-2 mb-2">
            <h6 class="text-error">This field is required</h6>
         </div>
      </div>
   </div>
</div>
<div class="form-group mb-8">
   <div class="col-3 col-sm-12">
      <label class="form-label" for="u_serial_number">Device/Asset: <sub class="text-secondary">*</sub></label>
   </div>
   <div class="col-4 col-sm-12">
      <select formControlName="u_serial_number" class="form-select" required>
      <option *ngFor="let device of devices" [ngValue]="device">
      {{ device.id }}
      </option>
      </select>
      <div *ngIf="serviceForm.get('u_serial_number').errors && (serviceForm.get('u_serial_number').touched || serviceForm.get('u_serial_number').dirty)">
         <div *ngIf="serviceForm.get('u_serial_number').hasError('required')" class="mt-2 mb-2">
            <h6 class="text-error">This field is required</h6>
         </div>
      </div>
   </div>
</div>
<div class="form-group mb-8">
   <div class="col-3 col-sm-12">
      <label class="form-label" for="subject">Subject: <sub class="text-secondary">*</sub></label>
   </div>
   <div class="col-4 col-sm-12">
      <input class="form-input" type="text" id="subject" placeholder="Enter subject" type="text" formControlName="subject"
         required>
      <div *ngIf="serviceForm.get('subject').errors && (serviceForm.get('subject').touched || serviceForm.get('subject').dirty)">
         <div *ngIf="serviceForm.get('subject').hasError('required')" class="mt-2 mb-2">
            <h6 class="text-error">This field is required</h6>
         </div>
      </div>
      <h6 class="text-gray mt-2">Please note maximum length is 80 characters.</h6>
   </div>
</div>
<div class="form-group mb-8">
   <div class="col-3 col-sm-12">
      <label class="form-label" for="describe">Please describe your issue:</label>
   </div>
   <div class="col-4 col-sm-12">
      <textarea class="form-input" id="describe" placeholder="Describe your issue" rows="3" formControlName="issue"></textarea>
      <h6 class="text-gray mt-2">The more information you can provide here, the easier time the organization will
         have in diagnosing and resolving your issue.
      </h6>
   </div>
</div>
<div class="columns col-12 col-sm-12">
   <div class="column col-10 col-sm-6 text-right">
      <button class="btn btn-link">Cancel</button>
   </div>
   <div class="column col-2 col-sm-6">
      <!--<a routerLink="/incident">--><button class="btn btn-primary" type="submit">Submit</button><!--</a>-->
   </div>
</div>
</form>

TS file

onSubmit(serviceForm) {
    console.log("Service form submitted");
      var data = "u_caller_id=" + serviceForm.u_caller_id + "&u_destination_country=" + serviceForm.u_destination_country + "&u_requester_phone_number=" + serviceForm.u_requester_phone_number;
      this.http.post("https://demo1049220.mockable.io/api/incident", data).subscribe((data) => {});
      console.log("data has gone");
  }
}

service.ts (to get the web api data)

serviceApiUrl: string = 'https://demo1049220.mockable.io/api/incident';

  constructor(
    private http: HttpClient,

    ) { }

  public getAll() {
    return this.http.get(this.serviceApiUrl);
    }
  }

So I am a little confused on how to achieve this, any help would be great.

Tolga Açış · Accepted Answer · 2019-03-02 13:49:39Z

1

It seems you are trying to call onSubmit() but on your .ts file, you have onSubmit(serviceForm), since you are using a formGroup, you can get the values from that with "this.serviceForm.value", not pass to onSubmit function as an argument. So you can use it like this:

onSubmit() {
var data = "u_caller_id=" + this.serviceForm.value.u_caller_id + "&u_destination_country=" + this.serviceForm.value.u_destination_country + "&u_requester_phone_number=" + this.serviceForm.value.u_requester_phone_number;
this.http.post("https://demo1049220.mockable.io/api/incident", data).subscribe((res) => {});
console.log("data has gone");
}

This is the correct way to pass form values to your http request. Also name "data" can shadow result (data) from your subscription so change its name to something like (res) like I did.

answered Mar 2, 2019 at 13:49

Tolga Açış

1682 silver badges16 bronze badges

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

Comments

toukirahmeds · Accepted Answer · 2019-03-02 16:32:04Z

On top of ts file, import "HttpHeaders" from "@angular/common/http":

import { HttpHeaders } from @angular/common/http;

Then update your onSubmit method like below:

onSubmit(){
   this.http.post("https://demo1049220.mockable.io/api/incident", 
      this.serviceForm.value,
      {
         headers : new HttpHeaders().set("Content-Type","application/json")
      }
   ).subscribe((response : any)=>{
       console.log(response);//On success response
   },(errorResponse : any)=>{
       console.log(errorResponse);//On unsuccessful response
   });
}

If the data has been sent successfully and server sends a successful response with 200 Ok, you will get a successful response in the first callback function, or else the second callback function will be called and your response will be in the "errorResponse" variable.

Collectives™ on Stack Overflow

How to send form data to web api via Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related