如何通过Angular将表单数据发送到web api

Question

我在Angular 6中有一个表单，我有一个表从web api获取数据。是否可以将该表单数据发送到该Web api？我有一个模拟web api url，这是一个get请求。到目前为止我的代码是：

Html表格：

    <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文件

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（获取web api数据）

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

  constructor(
    private http: HttpClient,

    ) { }

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

所以我对如何实现这一点感到困惑，任何帮助都会很棒。

Answer 1

你似乎试图调用onSubmit（），但是在你的.ts文件中，你有onSubmit（serviceForm），因为你使用的是formGroup，你可以从“this.serviceForm.value”中获取值，而不是传递给onSubmit函数作为参数。所以你可以像这样使用它：

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

这是将表单值传递给http请求的正确方法。名称“data”也可以从您的订阅中隐藏结果（数据），因此将其名称更改为类似（res）的内容，就像我一样。

Answer 2

在ts文件的顶部，从“@ angular / common / http”导入“HttpHeaders”：

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

然后更新你的onSubmit方法，如下所示：

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

如果数据已成功发送且服务器发送成功响应200 Ok，您将在第一个回调函数中获得成功响应，否则将调用第二个回调函数，您的响应将在“errorResponse”变量中。