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

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)
  }

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

1. Create a service file.
2. 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) {}

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

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


</details>



# 答案3
**得分**: 2

开始通过导入必要的API：

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

声明如下的提交函数：

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)
    );
}

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

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)
    );
  }

答案4

得分: 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 form:

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?

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??