Utilisation d'angular 4 pour envoyer des données de formulaire

Question

Bonjour, je suis en train de créer un thème WordPress et j'ai besoin d'utiliser le plugin Contact Form 7, mais je n'arrive pas à trouver la bonne façon d'envoyer les données du formulaire au plugin.

voici mon service postal :

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'),
    })
  }
}

et la partie composante qui utilise le service :

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

À ce stade, le serveur répond que le message a été soumis sans problème, mais lorsque je me rends sur la page d'administration de WP, aucun des champs n'a de valeur.

Mais si j'utilise postman avec cette url et ces paramètres, le formulaire fonctionne comme je le souhaite.

J'ai également trouvé une autre solution qui fonctionne mais ce n'est pas la manière angulaire que je veux.

la solution

 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

J'ai trouvé ma solution, le problème se situait au niveau des définitions des en-têtes de mon service, la manière correcte est :

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