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团队聊天后，我发现提交后发送的数据已经序列化。由于我的服务是以json文件的形式发送我的“数据”，而这些文件无法由formspree后端计算。因此，我只是使用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
    }

它有效！

Angular2 + Formspree。不良请求400

1 个答案: