property binding with ngValue in angular

Question

I have 2 classes. I want to select and send id with Dropddown, but the data is null.Dropdown comes with resident names, but I can't associate with the id and send it to the database.The code first method was used on the backen side. There is no residantId in my Apartment class, only a resident of type Resident.

ApartmentComponent.ts

export class ApartmentComponent implements OnInit {

  residents: Resident[] = [];

  apartmentAddForm!:FormGroup

  constructor(private formBuilder:FormBuilder,private toastrService:ToastrService,private apartmentService:ApartmentService,private residentService:ResidentService) { }

  ngOnInit(): void {
    this.createApartmentForm();
    this.getResidents();
  }

  createApartmentForm(){
    this.apartmentAddForm=this.formBuilder.group({
        type:["",Validators.required],
        residentId:["",Validators.required],
        floor:["",Validators.required],
        doorNumber:["",Validators.required],
        block:["",Validators.required],
        status:[true],
    })      
  }

  add(){
    if(this.apartmentAddForm.valid){
      let apartmentModel = Object.assign({},this.apartmentAddForm.value)
      this.apartmentService.add(apartmentModel).subscribe(data=>{
        this.toastrService.success(data.message,"Başarılı")
        console.log(data)
      },dataError=>{
        if(dataError.error.Errors.length>0){
          for(let i = 0; i<dataError.error.Errors.length;i++){
            this.toastrService.error(dataError.error.Errors[i].ErrorMessage,"Doğrulama Hatası")
          }
        }
      })
    }else{
      this.toastrService.error("Formunuz eksik","Dikkat")
    }
  }

  getResidents(){
    this.residentService.getResidents().subscribe((response)=>{
      this.residents = response.data;
    });
  }

ApartmentComponent.html

 <form [formGroup]="apartmentAddForm">

                    <div class="mb-3">
                        <label  for="name">Ev Tipi</label>

                         <div class="form-group">
                             <input type="text" id="type" formControlName="type" class="form-control" placeholder="Ev Tipi"/>  <!--ilişkilendirme formControlName ile yapılır-->
                         </div>
                    </div>

                    <div class="mb-3">
                        <div class="form-group">
                          <label for="residentId">Ev Sahibi</label>
                          <select class="form-control" formControlName="residentId">
                            <option *ngFor="let resident of residents" [ngValue]="resident.id">
                              {{ resident.name }}
                            </option>
                          </select>
                        </div>
                      </div>

Apartment Model

export interface Apartment{
    id:number
    residentId:number
    type:string
    floor:string
    doorNumber:string
    block:string
    status:boolean
}