Level 60
validation errors? what's inside error: {…} object?
Nov 5, 2023
12
Level 4
Unable to Update Laravel API One to Many Relationship data on Angular Frontend
I have Angular App connected with Laravel API. In Laravel API there are one to many relationship between Employee and Salary Models. Employee.php
protected $fillable = ['birth_date','first_name','last_name','gender','hire_date'];
protected $primaryKey = 'emp_no';
public function salaries(): HasMany
{
return $this->hasMany(Salary::class, 'emp_no','emp_no');
}
Salary.php
protected $fillable = ['salary','from_date','to_date'];
public function employee(): BelongsTo
{
return $this->belongsTo(Employee::class, 'emp_no');
}
EmployeeUpdate Controller is
public function updateEmployee(Request $request, $id)
{
$employee = Employee::find($id);
if (is_null($employee)) {
return response()->json(['message' => 'Employee not found'], 404);
}
$employee->update($request->validate([
'emp_no' => 'required',
'first_name' => 'required',
'last_name' => 'required',
'gender' => 'required',
'hire_date' => 'required'
]));
$employee->salaries()->update($request->validate([
'emp_no' => 'required',
'salary' => 'required',
'from_date' => 'required',
'to_date' => 'required'
]));
return response($employee, 200);
}
api route for update
Route::put('updateEmployee/{id}','App\Http\Controllers\EmployeeController@updateEmployee');
my data.service.ts is like this
updateData(id: string, data: any) {
return this.httpClient.put('http://127.0.0.1:8000/api/updateEmployee/'+id, data);
}
and employee-edit.component.ts
updateEmployee() {
this.dataService.updateData(this.id, this.employee).subscribe(res => {
this.data = res;
this.employee = this.data;
console.log(res);
})
}
but when I try to update Employee Model data is updating well but not updating Salary Model data inspect encounting folllowing error
ERROR Object { headers: {…}, status: 422, statusText: "Unprocessable Content", url: "http://127.0.0.1:8000/api/updateEmployee/1", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://127.0.0.1:8000/api/updateEmployee/1: 422 Unprocessable Content", error: {…} }
how could I fix this problem?
Level 4
@Sergiu17 error include error: Object { message: "The salary field is required
Level 4
@Sergiu17 POST man api work fine. problems with Angular Front
Level 60
@Flex the message is quite clear, angular app does not send salary field, in the request tab you could also inspect the payload that was sent, check if it includes salary field
Level 4
@Sergiu17 in the request tab there is `XHRPUT http://127.0.0.1:8000/api/updateEmployee/1 [HTTP/1.1 422 Unprocessable Content 651ms]
birth_date "1983-10-05" created_at null emp_no 1 first_name "John" gender "male" hire_date "2023-09-18" last_name "Nord" salaries […] 0 {…} created_at "2023-10-09T08:17:26.000000Z" emp_no 1 from_date "2023-09-22" salary "25000" to_date "2023-09-19" updated_at "2023-11-06T06:39:38.000000Z" `
Level 4
@Sergiu17 this is my update salary form
<h4>Salary Details</h4>
<div class="salary-details" *ngFor="let salary of employee.salaries">
<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>
Level 60
@Flex is this the request payload?
{
"birth_date": "1983-10-05",
"created_at": null,
"emp_no": 1,
"first_name": "John",
"gender": "male",
"hire_date": "2023-09-18",
"last_name": "Nord",
"salaries": [
{
"created_at": "2023-10-09T08:17:26.000000Z",
"emp_no": 1,
"from_date": "2023-09-22",
"salary": "25000",
"to_date": "2023-09-19",
"updated_at": "2023-11-06T06:39:38.000000Z"
}
]
}
Level 4
@Sergiu17 yes this is update request payload
Level 60
$salaries = $request->validate([
'salaries.*.emp_no' => 'required',
'salaries.*.salary' => 'required',
'salaries.*.from_date' => 'required',
'salaries.*.to_date' => 'required'
]);
foreach($salaries as $salary) {
$employee->salaries()->update($salary);
}
that should work, try to find a way to do a single query to update the data, since emp_no will be the same, if think it's possible
Level 4
@Sergiu17 got following error msg
XHRPUT
http://127.0.0.1:8000/api/updateEmployee/1
[HTTP/1.1 500 Internal Server Error 144ms]
message "SQLSTATE[42S22]: Column not found: 1054 Unknown column '0' in 'field list' (SQL: update `salaries` set `0` = {\"emp_no\":1,\"salary\":\"25000\",\"from_date\":\"2023-09-22\",\"to_date\":\"2023-09-19\"}, `salaries`.`updated_at` = 2023-11-08 07:14:42 where `salaries`.`emp_no` = 1 and `salaries`.`emp_no` is not null)"
exception "Illuminate\Database\QueryException"
file "F:\2023\code\2023\api\vendor\laravel\framework\src\Illuminate\Database\Connection.php"
line 760
trace [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
Level 60
@Flex debug your code
public function updateEmployee(Request $request, $id)
{
dd($request->all());
$salaries = $request->validate([
'salaries.*.emp_no' => 'required',
'salaries.*.salary' => 'required',
'salaries.*.from_date' => 'required',
'salaries.*.to_date' => 'required'
]);
dd($salaries);
see what you get and adjust your code as you need
Level 4
@Sergiu17 it is
array:10 [ // app\Http\Controllers\EmployeeController.php:36
"emp_no" => 1
"birth_date" => "1983-10-05"
"first_name" => "sewwandi"
"last_name" => "Kannangara"
"gender" => "male"
"hire_date" => "2023-09-18"
"created_at" => null
"updated_at" => null
"salaries" => array:1 [
0 => array:6 [
"emp_no" => 1
"salary" => "21000"
"from_date" => "2023-09-22"
"to_date" => "2023-09-19"
"created_at" => "2023-10-09T08:17:26.000000Z"
"updated_at" => "2023-11-06T06:39:38.000000Z"
]
]
]
and indicate following error msg also
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/updateEmployee/1. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 500
Please or to participate in this conversation.