I am facing an issue with my Spring entity, Agent, which includes an Agency object. When adding a new agent, I need to pass the agency as an object in the Angular form. While the backend code is functioning correctly, I am struggling to figure out how to properly pass the agency object to it. Currently, I am only saving the agency ID in the database, but I must specify the entire object when creating the entity.
@Entity
@Builder
@Getter
@Setter
public class Agent {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
@Column(nullable = false)
private String firstName;
@Column(nullable = false)
private String lastName;
private String phone;
@Column(nullable = false)
private String email;
@ManyToOne
@JoinColumn(name = "agency_id", referencedColumnName = "id", nullable = false)
@JsonIgnore
private Agency agency;
}
Here is the corresponding DTO:
@Getter
@Setter
@Builder
public class AgentDto {
private Integer id;
@NotNull
private String firstName;
@NotNull
private String lastName;
private String phone;
@NotNull
@Email
private String email;
private Agency agency;
}
The save method for agents in the AgentService looks like this (where repo is the injection of JpaRepository):
public AgentDto save(AgentDto agentDto) {
Agent agent = mapper.mapToEntity(agentDto);
Agent agentSaved = repo.save(agent);
return mapper.mapToDto(agentSaved);
}
The controller simply calls the save method:
@PostMapping
public AgentDto save(@RequestBody AgentDto agentDto) {
return service.save(agentDto);
}
In my Angular project, the agent model goes as follows:
import { Agency } from "./agency";
export interface Agent {
id: number;
firstName: string;
lastName: string;
email: string;
phone: string;
agency: Agency;
}
This method is used in the agent service:
addAgent(model: any) {
return this.http.post(this.baseUrl + 'agents', model);
}
The TypeScript code for the "add-agent" component looks like this:
import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AgentService } from '../_services/agent.service';
@Component({
selector: 'app-create-agent',
templateUrl: './create-agent.component.html',
styleUrls: ['./create-agent.component.css']
})
export class CreateAgentComponent implements OnInit {
model: any = {};
agencies: Agency[] = [];
constructor(private agentService: AgentService, private router: Router, private _location: Location) { }
ngOnInit(): void { this.loadAgencies(); }
loadAgencies() {
this.agencyService.loadAgencies().subscribe(
agencies => {
this.agencies = agencies;
}
);
}
createAgent() {
this.agentService.addAgent(this.model).subscribe(() => {
this._location.back();
})
}
}
Finally, here is the HTML form section:
<form (ngSubmit)="createAgent()" autocomplete="off">
<input
name="firstName"
[(ngModel)]="model.firstName"
class="form-control mt-3"
type="text"
placeholder="First name"
>
<input
name="lastName"
[(ngModel)]="model.lastName"
class="form-control mt-3"
type="text"
placeholder="Last name"
>
<input
name="email"
[(ngModel)]="model.email"
class="form-control mt-3"
type="text"
placeholder="E-mail"
>
<input
name="phone"
[(ngModel)]="model.phone"
class="form-control mt-3"
type="text"
placeholder="Phone"
>
<select name="agency" [(ngModel)]="model.agency" >
<option *ngFor="let agency of agencies" [ngValue]="agency">{{ agency.id }}</option>
</select>
<button class="btn btn-success btn-sm mt-3" style="margin-right: 2%; box-shadow: 1px 1px grey;" type="submit">Add</button>
</form>
I need assistance in passing the agency so that its ID gets saved in the database. I have attempted different approaches without success. What would be the correct way to achieve this?