how to insert data using angular form input laravel one to many relationship models
I am using Angular as Frontend and Laravel API as backend for My App. in Laravel API Student Model and Subject Model are One to Many Relationship like following Student.php
public function subjects(): HasMany
{
return $this->hasMany(Subject::class, 'stu_no','stu_no');
}
Subject.php
public function student(): BelongsTo
{
return $this->belongsTo(Student::class, 'stu_no');
}
and data insert controller
public function addStudent(Request $request) {
$student = Student::create($request->all());
$subject = $student->subjects()->create($request->all());
return response($student, 201);
}
now I need insert subjectdata using angular form to laravel api
<form (ngSubmit)="insertData()">
<h4>Profile Detail</h4>
<h4>Subject Details</h4>
<div class="subject-details" >
<div class="table">
<div class="form-group row">
<label for="subject" class="col-sm-2 col-form-label">Subject</label>
<div class="col-sm-10">
<input type="text" name="subject" class="form-control" [(ngModel)]="subject.subject">
</div>
</div>
<br>
</div>
</div>
<br>
<button class="btn btn-dark btn-sm mt-4 btnPosition">Add Subject</button>
<br><br>
</form>
my serrvice.ts is
insertData(data: Student) {
return this.httpClient.post('http://127.0.0.1:8000/api/addStudent', data);
}
and student-add.component.ts
export class StudentAddComponent implements OnInit {
student = new Student();
subject: any;
constructor(private dataService:DataService) {}
ngOnInit(): void {
}
insertData() {
this.dataService.insertData(this.student).subscribe(res => {
console.log(res);
})
}
}
but when I try to insert console print following error msg ERROR TypeError: ctx.subject is undefined I supporse Angular form salary fiels <input type="text" name="subject" class="form-control" [(ngModel)]="subject.subject"> unable to define? how could I fix this problem here? I need to know how pass angular form input data to Laravel one to many relationship models?
Please or to participate in this conversation.