I am a beginner in angular and currently involved in a project using angular 6 with Spring Boot 2. Here is the TypeScript class I am working with:
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[],
) {}
}
For instance, when creating a partner, a Location must be selected.
In my HTML file, it looks like this:
<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>
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);
}
});
}
This is 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')));
}
An issue arises in Spring where it cannot create Location from [Object object]. The output of
console.log('Partner = ' + JSON.stringify(this.partner));Partner = {"name":"Test production","email":"you@example.com","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}
It seems that the http post request sends location : [object Object]....
How can I resolve this issue?