Angular2 + Formspree。不正なリクエスト400

Question

私は 'angular2 +'アプリケーションでformspree.ioを使用して連絡先フォームを実装しようとしています。私のコンポーネントからhttpリクエストを直接処理したくないので、私はこの仕事をするためのコンタクトサービスを作成しました。 残念ながら私の要求が適切に掲載されていないようだ。

状態：400（不正な要求）{ "エラー"： "空のフォームを送信することはできません"}

ここに私のコード：

を

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のチームとのチャットの後、私が提出した後、シリアル化され、そのデータを送信していることが分かりました。 私のサービスは、formspreeバックエンドによって計算できないjsonファイルの形で自分の "データ"を送信しています。私は単純に、ES6を使ってシリアル化された形式で "data"属性を書き換えました。ここで

コード：

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 
    } 

そして、それは働きます！