update crud angular formControlName databinding

Question

hello i am trying to update my report chambre , when i click modifier i should receive the data of room already selected ( idChambre) all the other fields are working good but not for idChambre this is my html code :

     <div class="form-group">
          <label for="numeroChambre" class="form-label">Numéro Chambre:</label>
          <select formControlName="chambre" [(ngModel)]="romm.chambre"  id="numeroChambreSelect" class="form-control">
                   <option *ngFor="let room of allRooms" [ngValue]="room">{{room.idChambre}}</option>
          </select>                                     
 </div>

on init :

 ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.reportId = +params['id']; // Correctly assign reportId
      this.loadReportById(this.reportId);
    });
    this.fetchAllRooms(); 
  }

fetch allRooms :

  fetchAllRooms(): void {
    this.roomService.getChambres().subscribe(
      rooms => {
        this.allRooms = rooms; // Populate the allRooms array
      },
      error => console.error('Error fetching rooms', error)
    );
  }

update Report :

  UpdateReport(): void {
        if (this.reportForm.valid) {
          console.log('reportForm Data:', this.reportForm.value);
          this.reportForm.value.id=this.reportId
          console.log(this.reportForm.value);
          
          this.reportService.updateReport(this.reportId, this.reportForm.value).subscribe(
            response => {
              console.log('Report updated successfully', response);
              this.router.navigate(['/reporting/list']);
            },
            error => console.error('Error updating report', error)
          );
        }
      }