Angular - PHP -> 发送邮件 null php 值

Question

我的代码需要帮助，我正在尝试将 FormData 从 Angular 发送到 PHP，然后发送邮件，PHP vars 总是显示为空，我做错了什么，看不到什么

在 HTML 中使用 formGroup 和 ngSubmit

我的 HTML 代码：

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

在 Ts 上使用 FormControl Validators 和 http.post 将数据传递给 PHP

我的 .ts 代码：

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

在 tje PHP 上使用这个从 Angular 检索 JSON

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

我的 PHP 代码：

<?php

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

$name = $request->name;

$to      = "example@mail.com";

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

$body = wordwrap($body, 70);

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

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

?>

Answer 1

您不需要 FormData 将 JSON 发送到您的 API。即使您将内容类型强制为 application/json，我也不确定它的格式是否正确。

可以使用 Angular HTTP 客户端将纯 JavaScript 对象作为 JSON 发送。为此，请将一个普通对象传递给 post 方法：

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