Angular – PHP -> send mail null php values

I need help in my code, I’m trying to send a FormData from Angular to PHP and later send a mail, always appears the PHP vars empty, I’m doing something wrong and doesn’t see what

On the HTML use formGroup and ngSubmit

My HTML code:

    <form [formGroup]="form"
              (ngSubmit)="onSubmit()">

          <div class="form-boxes">

            <div class="row">
              <div class="col-12 col-md-6">
                <div class="form-floating mb-3">

                  <input type="text"
                         class="form-control"
                         id="name"
                         formControlName="name"
                         placeholder="Name"
                         required>
                  <label for="name">Name</label>
                  <div *ngIf="showErrorMessages && name.invalid"
                       class="text-end text-danger my-1">
                    You must fill the name
                  </div>
                </div>
              </div>

          <div class="text-center">
            <input [disabled]="isLoading"
                   class="btn btn-page"
                   type="submit"
                   value="Send">
          </div>

          <input [formControl]="honeypot"
                 class="d-none"
                 type="text" />
        </form>
      </div>

On the Ts use the FormControl Validators and the http.post to pass the data to PHP

My .ts code:

export class ContactComponent
  implements OnInit
{
  form: FormGroup;

  name: FormControl = new FormControl("", [Validators.required]);

  showErrorMessages: boolean = false; // flag to show error messages
  submitted: boolean = false; // show and hide the success message
  honeypot: FormControl = new FormControl(""); // we will use this to prevent spam

  isLoading: boolean = false; // disable the submit button if we're loading

  responseTitle: string = ''; // the response title message to show to the user
  responseMessage: string = ''; // the response message to show to the user

  serverUrl: string = "./assets/scripts/mailer.php" //Start php via the built in server

  constructor(
    private formBuilder: FormBuilder,
    private http: HttpClient
  )
  {
    this.form = this.formBuilder.group({
      name: this.name,
      honeypot: this.honeypot
    });
  }

  ngOnInit(): void
  {
  }

  onSubmit()
  {
    if (this.form.status == "VALID" && this.honeypot.value == "")
    {
      this.form.disable(); // disable the form if it's valid to disable multiple submissions

      var formData: any = new FormData();

      formData.append("name", this.name.value);

      this.isLoading = true; // sending the post request async so it's in progress
      this.submitted = false; // hide the response message on multiple submits

      const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      };

      this.http.post(this.serverUrl, formData, httpOptions).subscribe(
        (response) =>
        {
          this.responseTitle = "Thanks!";
          this.responseMessage = "Thanks for send a message";

          this.form.enable(); // re enable the form after a success
          this.submitted = true; // show the response message
          this.isLoading = false; // re enable the submit button

          Swal.fire({
            title: this.responseTitle,
            text: this.responseMessage,
            icon: 'success'
          });
        },
        (error) =>
        {
          this.responseTitle = "Sorry!";
          this.responseMessage = "Some issues happens";

          this.form.enable(); // re enable the form after a success
          this.submitted = true; // show the response message
          this.isLoading = false; // re enable the submit button

          Swal.fire({
            title: this.responseTitle,
            text: this.responseMessage,
            icon: 'error'
          });
        }
      );
    } else
    {
      this.showErrorMessages = true;

      this.responseTitle = "Sorry!";
      this.responseMessage = "Some issues happens";

      Swal.fire({
        title: this.responseTitle,
        text: this.responseMessage,
        icon: 'error'
      });
    }
  }
}

On tje PHP retrieve the JSON from Angular with this

$postdata = file_get_contents(“php://input”); $request = json_decode($postdata);

My PHP code:

<?php

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);

$name = $request->name;

$to      = "[e-mail]";

$title    = "From: $name";
$body   = "test";

$body = wordwrap($body, 70);

$header = "MIME-Version: 1.0rn";
$header.= "Content-Type: text/plain; charset=utf-8rn";
$header.= "X-Priority: 1rn";

mail($to, $title, $body, $header);

?>

Answer

You don’t need FormData to send JSON to your API. Even if you force the content type to application/json, I’m not sure it will be properly formatted.

Plain JavaScript objects can be sent as JSON using the angular HTTP client. To do so, pass a plain object to the post method:

this.http.post(this.serverUrl, this.name.value, httpOptions)