how to send a form data to server using post api in angular 7

Question

how can I send form data using post API using angular , have used form and method for component.ts file ,

<form #hlForm="ngForm" (ngSubmit)="getHospitalList(hlForm)">
  <input 
   type="text" 
   class="input-texts" 
   name="name" 
   placeholder="Enter Hospital , Insurance or Location"
   ngModel
   required
  >
  <button 
  type="submit" 
  value="submit" 
  class="hl-btn"
  (click)="hospitalFirstFold = false; hospitalSecondFold = true;"
   >Search
   </button>
</form>

  getHospitalList(form){
    console.log(form.value)
  }

Mridul · Accepted Answer · 2020-01-06 11:03:57Z

7

you need to create form data to send data using post api.

let fd = new FormData();
fd.append(key, value);

For api call

this.http.post(url, fd);

Fill values accordingly in formdata

answered Jan 6, 2020 at 11:03

Mridul

1,3661 gold badge8 silver badges19 bronze badges

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

2 Comments

Orit Over a year ago

Are there any constraints on what value should be? Must it be form.value or can it be anything like string or number?

Mridul Over a year ago

Value refers to what is required in the api. For ex: fd.append('age', '24').. Now this 24 might be coming from your some formControl or ngModel. I hope you can relate it now?

Sadaf Niknam · Accepted Answer · 2020-01-06 11:38:45Z

3

Start by importing the necessary APIs:

import { HttpClient } from '@angular/common/http';

Declare submit function like below:

getHospitalList(form){
    const formData = new FormData();
    formData.append('key', form.value);

    this.httpClient.post<any>(this.SERVER_URL, formData).subscribe(
      (res) => console.log(res),
      (err) => console.log(err)
    );
  }

answered Jan 6, 2020 at 11:38

Sadaf Niknam

5691 gold badge4 silver badges16 bronze badges

Comments

Mridul · Accepted Answer · 2020-01-06 16:58:23Z

3

Create a service file.
Create one function named of your choice, for example, function1 in your class.

function1(formData) {
return this.http.post(url, formData);
}

Add http in the constructor and import it.

constructor (private http: HttpClient) {}

Call that function1 in your class with form as a parameter and subscribe

   getHospitalList() {
    this.serviceA.function1(form.value).subscribe(response) => 
      {console.log(response)});
    }

edited Jan 6, 2020 at 16:58

Mridul

1,3661 gold badge8 silver badges19 bronze badges

answered Jan 6, 2020 at 11:36

Aayushi Dassani

815 bronze badges

Comments

Mike · Accepted Answer · 2020-01-06 12:14:50Z

1

import HttpClientModule and formsmodule in your app module if you have not defined a different module.

import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

*in your component*
import {NgForm} from '@angular/forms';

add serverurl as :
private readonly baseUrl = 'YourUrl';

constructor(private http: HttpClient) { }

create a method you gonna use for your submit event from your for ""

  getHospitalList(form: NgForm) {
    this.http.post(this.baseUrl, form.value).subscribe(next => {
      console.log("successful");
    },
    error => {
      console.log("failed submitting");
    });
  }

(click)="hospitalFirstFold = false; hospitalSecondFold = true;" what is going on there??

answered Jan 6, 2020 at 12:14

Mike

337 bronze badges

2 Comments

ishfaq Over a year ago

(click)="hospitalFirstFold = false; hospitalSecondFold = true;" what is going on there??

ishfaq Over a year ago

this for pagination, for sections, sorry for the confusion, it is unrelated to this part

Collectives™ on Stack Overflow

how to send a form data to server using post api in angular 7

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related