foreign key does not update in the target table

Issue

got another question.

I have a dropdown box that display a list of city (table city [city_id, name, postalcode, ...])

<option value="idOfTheCity">NameOfTheCity<option>

When i selected another town it does not update city_id_fk in the target (table vehicule [vehicule_id, ..., city_id_fk]).

[vehicule.html]

<app-select *ngIf="siteSelectConfig$ | async as siteSelectConfig"
            [config]="siteSelectConfig"
            (onBlur)="update()">
</app-select>

[vehicule.ts]

  update(): void {
    if (this.formGroup.valid) {
      const payload: VehiculeUpdatePayload = this.formGroup.value;
      payload.vehicule_id = this.detail.vehicule_id;
      this.vehiculeService.update(payload).subscribe();
    }
  }

[vehiculeService.ts]

  update(payload: VehiculeUpdatePayload): Observable<Vehicule> {
    return this.put(ApiUriEnum.VEHICULE_UPDATE, payload)
      .pipe(
        map((response: ApiResponse) => {
          return (response.result && !isNil(response.data)) ? VehiculeHelper.fromDto(response.data as VehiculeDto) : VehiculeHelper.getEmpty();
        })
      );
  }

[vehicule-update.payload.ts]

export interface VehiculeUpdatePayload extends PayloadInterface {
  vehicule_id: string;
  platenumber: string;
  city: City;
}

[vehiculeHelper.ts]

  public static toFormGroup(vehicule: Vehicule = VehiculeHelper.getEmpty()) : FormGroup {
    return new FormGroup({
      vehicule_id: new FormControl(vehicule.vehicule_id),
      platenumber: new FormControl(vehicule.platenumber),
      city: new FormControl(vehicule.city)
    });
  }

any idea or tips ?

Solution

Ok i found a solution:

Added

payload.site = {site_id: payload.site};

in the file [vehicule.ts]

  update(): void {
    if (this.formGroup.valid) {
      const payload: VehiculeUpdatePayload = this.formGroup.value;
      payload.vehicule_id = this.detail.vehicule_id;
      payload.site = {site_id: payload.site};
      this.vehiculeService.update(payload).subscribe();
    }
  }

Answered By - Albius