Angular - PHP -> send mail null php values - php

Question

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

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)