I'm encountering a problem with my Angular application when attempting to send a PUT request to the server. The error message I receive reads "Required request body is missing."
Below is a snippet of the code that is relevant:
Within the Child Component (ChambreFormComponent):
<div class="h-screen md:flex">
<div
class="relative overflow-hidden md:flex w-1/2 bg-gradient-to-r from-blue-800 to-purple-700 i justify-around items-center hidden"
>
>
<img class="h-40 w-96 mr-40" src="{{ image }}" />
<div
class="absolute -bottom-32 -left-40 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"
></div>
<div
class="absolute -bottom-40 -left-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"
></div>
<div
class="absolute -top-40 -right-0 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"
></div>
<div
class="absolute -top-20 -right-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"
></div>
</div>
<div class="flex md:w-1/2 justify-center py-10 items-center bg-white">
<form class="bg-white" (ngSubmit)="onSubmit()">
<h1 class="text-black font-bold text-2xl mb-1">{{ titre }}</h1>
...
<button
type="submit"
class="block w-full bg-indigo-600 mt-4 py-2 rounded-2xl text-white font-semibold mb-2"
>
{{buttonText}}
</button>
</form>
</div>
</div>
.ts File:
import {
Component,
EventEmitter,
Input,
Output,
ViewChild,
} from '@angular/core';
import { ChambreFormUpdateComponent } from '../chambre-form-update/chambre-form-update.component';
@Component({
selector: 'app-chambre-form',
templateUrl: './chambre-form.component.html',
styleUrls: ['./chambre-form.component.css'],
})
export class ChambreFormComponent {
...
In the Parent Component (ChambreFormUpdateComponent):
<app-chambre-form
...
.ts File:
import { Component, ViewChild } from '@angular/core';
...
The issue arises when making the PUT request as it returns a "Required request body is missing" error. It seems there might be an issue regarding how the form data is being handled or the construction of the request body.
Could someone assist me in identifying the root cause of this problem? What would be the appropriate way to construct and send the request body in this Angular application?