使用 Angular 4 发送表单数据答案

【问题标题】：Using angular 4 to send form-data使用 Angular 4 发送表单数据
【发布时间】：2017-11-01 01:40:58
【问题描述】：

您好，我正在构建一个 WordPress 主题，我需要在其上使用联系表单 7 插件，但我无法确定将表单数据发送到插件的正确方法。

这是我的邮政服务：

import {
  Injectable
} from '@angular/core';

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

@Injectable()
export class FormsService {
  constructor(private http: HttpClient) {}

  postForm(url, form) {
    return this.http.post(url, form, {
      headers: new HttpHeaders().set('Content-Type', 'multipart/form-data'),
    })
  }
}

以及使用该服务的组件部分：

onSubmit() {
    const fd = new FormData();
    fd.append('your-name', this.name);
    fd.append('your-email', this.email);
    fd.append('your-message', this.message);
    fd.append('your-subject', this.sumbject);

    const url = `/wp-json/contact-form-7/v1/contact-forms/${this.form_id}/feedback`;

    this.sendMsg.postForm(url, fd).subscribe(
      data => {
        console.log(data);
      },
      err => console.log({
        error: err
      })
    )

    this.submitted = true;
  }

此时服务器响应消息已提交正常，但是当我进入 WP 管理页面时，没有字段获取值。

但是，如果我使用带有此 url 的邮递员并为表单设置参数，则所有表单都可以按我的意愿工作。

我还找到了另一种可行的解决方案，但它不是我想要的角度方式。

解决办法

 onSubmit() {
    const url = `/wp-json/contact-form-7/v1/contact-forms/${this.form_id}/feedback`;
    this.submitted = true;
  }

 sendData(url) {
    let XHR = new XMLHttpRequest();
    const FD = new FormData();
    FD.append('your-name', this.name);
    FD.append('your-email', this.email);
    FD.append('your-message', this.message);
    FD.append('your-subject', this.subject);


    // Define what happens on successful data submission
    XHR.addEventListener('load', function(event) {
      alert('Yeah! Data sent and response loaded.');
    });

    // Define what happens in case of error
    XHR.addEventListener('error', function(event) {
      alert('Oups! Something went wrong.');
    });

    // Set up our request
    XHR.open('POST', url);

    // Send our FormData object; HTTP headers are set automatically
    XHR.send(FD);
  }

【问题讨论】：

标签： forms angular multipartform-data form-data

【解决方案1】：

我找到了我的解决方案，问题出在我的服务的标头定义上，正确的方法是：

postForm(url, body) {
  var headers = new HttpHeaders();
  headers.append('Content-Type', 'application/form-data');
  return this.http.post(url, body, {headers: headers })
}

【讨论】：