Angular post request sends [object Object]

Question

I'm new in angular and I'm working on an angular 6 / Spring Boot 2 project. I have this TypeScript class:

export class Partner {

  constructor
  (
    public id: number,
    public name: string,
    public email: string,
    public phone: string,
    public address: string,
    public picture: string,
    public latitude: number,
    public longitude: number,
    public horary: string,
    public comment: string,
    public specialOffer: boolean,
    public offer: string,
    public location: Location,
    public tripAdvisorLink: string,
    public type: Type,
    public country: string,
    public hotWords: HotWord[],
  ) {}
}

So, for example I would like to create a partner and I need to choose a Location.

In my HTML I have:

<div class="form-group">
  <label for="partner_location" class="form-control-label" required>Choose location <span class="text-danger">*</span></label>
  <select id="partner_location" class="form-control" [(ngModel)]="partner.location" name="partner_location">
    <option *ngFor="let location of locations" [value]="location">{{location.name}}</option>
  </select>
</div>

And in my create partner component:

export class CreatePartnerComponent implements OnInit {

  partner = new Partner(undefined, '', '', '', '', '', undefined, undefined, '', '', false, '', null, '', null, '', null);
  types: Type[];
  locations: Location[];
  message = '';
  error = '';

  constructor(
    private getPartnersService: GetPartnersService,
    private getTypesService: GetTypesService,
    private getLocationService: GetLocationsService
  ) {}

  ngOnInit() {
    this.loadInitialData();
  }

  loadInitialData() {
    this.getLocationService.getLocations().subscribe(locations => this.locations = locations);
    this.getTypesService.getTypes().subscribe(types => this.types = types);
  }
  onSubmit() {
    console.log('Partner = ' + JSON.stringify(this.partner));
    this.getPartnersService.createPartner(this.partner)
      .subscribe(partner => {
        if (partner.id !== undefined) {
          this.showMessage();
          window.scrollTo(0, 0);
        } else {
          this.showError();
          window.scrollTo(0, 0);
        }
      });
  }

and this my create partner method:

const httpOptions = { headers: new HttpHeaders({'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'}) };

  createPartner(partner: Partner): Observable<Partner> {
    const url = `${baseUrl}/partner/add`;
    return this.http.post<Partner>(url, partner, httpOptions)
      .pipe(catchError(HandleError.handleError<Partner>('createPartner')));
  }

And I'm getting an error in Spring that says that he can't create Location from [Object object]. And my console.log('Partner = ' + JSON.stringify(this.partner)); method prints:

Partner = {"name":"Test production","email":"[email protected]","phone":"32489836733","address":"brolekestraat","picture":"","latitude":"55","longitude":"1.23424324","horary":"9 - 18 every day","comment":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaa","specialOffer":true,"offer":"5%","location":"[object Object]","tripAdvisorLink":"http://brol.be","type":"[object Object]","country":"Belgium","hotWords":null}

So as far I understand, the http post request sends location : [object Object]....

How can do this work ?

Answer 1

The data binding sets partner.location to a string because the option value is bound with [value]. You should use [ngValue] to bind the option value to an object:

<select id="partner_location" class="form-control" [(ngModel)]="partner.location" name="partner_location">
  <option *ngFor="let location of locations" [ngValue]="location">{{location.name}}</option>
</select>

---

From the Angular documentation:

If your option values are simple strings, you can bind to the normal value property on the option. If your option values happen to be objects (and you'd like to save the selection in your form as an object), use ngValue instead.