Question

我在Angular 6中有一个表单，并且有一个表，该表从Web api获取数据。是否可以将表单数据发送到该Web API？我有一个模拟的Web API网址，这是一个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请求的正确方法。另外，“数据”名称也可能会影响您订阅的结果（数据），因此请像我一样将其名称更改为（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”中“变量。

如何通过Angular将表单数据发送到Web API

2 个答案: