Angular2 + Formspree。错误请求 400

Question

我正在尝试通过在“angular2+”应用程序中使用formspree.io 来实现联系表单。因为我不想直接从我的组件处理 http 请求，所以我创建了一个联系服务来完成这项工作。 不幸的是，我的请求似乎没有正确发布：

status:400 (bad request) { "error": "Can't send an empty form" }

这是我的代码：

contact.service.ts

import { Injectable } from '@angular/core';
import {Http, Response, Headers, RequestOptions, URLSearchParams} from '@angular/http';
import { Observable } from 'rxjs/Observable';



    @Injectable()
    export class ContactService {

      constructor(private http: Http) { 

      }

         postEmail(name: String, email: String, message: String): Observable<string>{

          let headers = new Headers({ 
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'

          });
          let options = new RequestOptions({ headers: headers });

          let url = "http://formspree.io/my@email.com";
          let data = {
            name: name,
            email: email,
            message: message
          }

          return this.http.post(url, data, options)
          .map(response => {
            console.log('email sent', response);
            return response;
          })
          .catch(this.handleError);
        }

      private handleError(err){
            //error handling
        }


    }

contact.component.ts

import { Component} from '@angular/core';
import { ContactService } from './contact.service';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { Contact } from './contact.interface';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

    emailForm: FormGroup;
    messageSentSuccess: boolean;
  messageSentError: boolean;
    events: any[]=[];

  constructor(
    private service: ContactService,
    private _fb: FormBuilder
    ) { 

    this.emailForm = this._fb.group({
      'email':   [null, Validators.compose([Validators.required])],
      'name':    [null, Validators.required ],
      'message': [null, Validators.compose([Validators.required, Validators.minLength(10)])]
    });


  }

  onSubmit(form: any) {
      this.service.postEmail(form.value.name.toString(),form.value.email.toString(),form.value.message.toString())
      .map(res => res)
      .subscribe(
        res => {},
        error => {
                  this.messageSentError = true;
                  this.emailForm.reset();
                  setTimeout(()=>{this.messageSentError=false},3000);
                  },
        () => {
          this.messageSentSuccess=true;
          setTimeout(()=> { this.messageSentSuccess=false },3000);
         }
      );
    }

}

Answer 1

和formspree.io的团队聊了聊，发现提交后就是把它的数据序列化了。 由于我的服务以 json 文件的形式发送我的“数据”，而该文件无法由 formspree 后端计算。因此我只是使用 ES6 以序列化形式重写了“数据”属性。

代码如下：

 postEmail(name: String, email: String, message: String): Observable<string>{

      let headers = new Headers({ 
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded'

      });
      let options = new RequestOptions({ headers: headers });

      let url = "http://formspree.io/my@email.com";

      // WRONG
      // let data = {
      //   name: name,
      //   email: email,
      //   message: message
      // }

      // RIGHT
      let data = `name=${name}&email=${email}&message=${message}`;

      return this.http.post(url, _data, options)
      .map(response => {
        console.log('email sent', response);
        return response;
      })
      .catch(this.handleError);
    }

  private handleError(err){
        // handle error
    }

而且它有效！