Angular Edit 400 status Crud

Question

hello guys i have problem using angular spring boot , For spring boot : backend when i try to make edit request using spring boot without puting the id i got status 500 , so i add the id using swagger and it's working ( on backend )

For Angular : FrontEnd i need to add the Id to reportForm this is my code but i always get 400 status so i think i should add id to updatedData ( as it's working with swagger ) angular Status 400

My code ts :

  UpdateReport(): void {
    console.log(this.reportId);
    this.reportForm.patchValue({id:this.reportId});
    if (this.reportForm.valid) {
      
      // Log the reportForm data to verify that 'id' is included
      console.log('reportForm Data:', this.reportForm.value);

      this.reportService.updateReport(this.reportId, this.reportForm.value).subscribe(
        response => {
          console.log('Report updated successfully', response);
          this.router.navigate(['/listreport']);
        },
        error => console.error('Error updating report', error)
      );
    }
  }
}

my service code :

  updateReport(reportId: number, updatedData: any): Observable<any> {
    return this.http.put<any>(`${this.apiUrl}/update/${reportId}`, updatedData);
  }

when i try to edit report without id swagger error 500 when i don't put id

backend working when i add id

i try to patch the id value into reportForm , this is my code report form :

 // Initialize the form here
    this.reportForm = new FormGroup({
      chambre: new FormControl('', Validators.required),
      problem: new FormControl('', Validators.required),
      description: new FormControl(''),
      dateReport: new FormControl('', Validators.required)
    }

report form angular vue