I have Angular App connected with Laravel API. In Laravel API there are one to many relationship between Employee and Salary Models. when I try to insert data Only insert Employee Model data but not insert salary model data Employee Insert Controller is
public function addEmployee(Request $request) {
$employee = Employee::create($request->all());
$salary = $employee->salaries()->create($request->all());
return response($employee, 201);
}
api route for insert
/add new Employee
Route::post('addEmployee','App\Http\Controllers\EmployeeController@addEmployee');
employee-add.html
<div class="detail-list">
<h3>Employee Profile</h3>
</div>
<form (ngSubmit)="insertData()">
<h4>Profile Detail</h4>
<div class="form-group row">
<label for="first_name" class="col-sm-2 col-form-label">First Name</label>
<div class="col-sm-10">
<input type="text" name="first_name" class="form-control" [(ngModel)]="employee.first_name">
</div>
</div>
<br>
<div class="form-group row">
<label for="last_name" class="col-sm-2 col-form-label">Last Name</label>
<div class="col-sm-10">
<input type="text" name="last_name" class="form-control" [(ngModel)]="employee.last_name">
</div>
</div>
<br>
<div class="form-group row">
<label for="birth_date" class="col-sm-2 col-form-label">Date of Birth</label>
<div class="col-sm-10">
<input type="date" name="birth_date" class="form-control" [(ngModel)]="employee.birth_date">
</div>
</div>
<br>
<div class="form-group row">
<label for="hire_date" class="col-sm-2 col-form-label">Hire Date</label>
<div class="col-sm-10">
<input type="date" name="hire_date" class="form-control" [(ngModel)]="employee.hire_date">
</div>
</div>
<br>
<div class="form-group row">
<label for="gender" class="col-sm-2 col-form-label">Gender</label>
<div class="col-sm-10">
<input type="text" name="gender" class="form-control" [(ngModel)]="employee.gender">
</div>
</div>
<br>
<h4>Salary Details</h4>
<div class="salary-details" >
<div class="table">
<div class="form-group row">
<label for="salary" class="col-sm-2 col-form-label">Salary</label>
<div class="col-sm-10">
<input type="text" name="salary" class="form-control" [(ngModel)]="salary.salary">
</div>
</div>
<br>
<div class="form-group row">
<label for="from_date" class="col-sm-2 col-form-label">From Date</label>
<div class="col-sm-10">
<input type="date" name="from_date" class="form-control" [(ngModel)]="salary.from_date">
</div>
</div>
<br>
<div class="form-group row">
<label for="to_date" class="col-sm-2 col-form-label">To Date</label>
<div class="col-sm-10">
<input type="date" name="to_date" class="form-control" [(ngModel)]="salary.to_date">
</div>
</div>
<br>
</div>
</div>
<br>
<button class="btn btn-dark btn-sm mt-4 btnPosition">Add Employee</button>
<br><br>
</form>
angular data.service.ts for insert data
insertData(data: Employee) {
return this.httpClient.post('http://127.0.0.1:8000/api/addEmployee', data);
}
and employee-add.component.ts
export class EmployeeAddComponent implements OnInit {
employees:any;
employee = new Employee();
salary: any;
title: any;
constructor(private dataService:DataService) {}
ngOnInit(): void {
}
insertData() {
this.dataService.insertData(this.employee).subscribe(res => {
console.log(res);
})
}
}
Employee model like
export class Employee {
birth_date:any;
first_name:any;
last_name:any;
gender:any;
hire_date:any;
salaries: any;
salary:any;
emp_no: any;
}
but console encontered following error msg about salary ERROR TypeError: ctx.salary is undefined I think I need relationship between Employee Model and Salary Model in Angular? how could I fix this matter