Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Amalmax's avatar

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?

0 likes
0 replies

Please or to participate in this conversation.