角度4を使用してフォームデータを送信

Question

こんにちは私は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; 
    } 

は、メッセージがOKを提出したことを、サーバーの応答が、私は行くときWP管理者ページには、フィールドの値以外の値を取得します。

しかし、私がこのURLとparamsで郵便配達員を使用すると、フォームはすべて私が望むように動作します。

また、別の解決策がありますが、それは私がしたい角度の方法ではありません。

ソリューション

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); 
    } 

Answer 1

私は解決策を見つけ、問題は私のサービスのヘッダの定義にあった、正しい方法は次のとおりです。

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