Angular2 + Formspree。错误的请求400

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

状态：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/[email protected]"; 
      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); 
     } 
    ); 
    } 

}

来源

2017-05-26 Ugo

您可以检查表单数据是否在控制台中打印 –

正在发送的数据正在评估为空 –

表单数据是否正确提交，这意味着变量名称，电子邮件，消息具有验证输入（I xchecked在控制台） – Ugo

与球队formspree.io的聊天后，我发现提交后发送其数据序列化。由于我的服务以jsp文件的形式发送我的“数据”，这是无法由formpree后端计算的。因此，我只是用序列化的形式重新编写了使用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/[email protected]"; 

     // 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 
    }

和它的作品！

来源

2017-05-28 10:06:22 Ugo

Angular2 + Formspree。错误的请求400

回答

相关问题