In angular I used template driven forms and my backend and frontend working correctly. but when i hit edit button in my studenttable component, I got this error in my console,
core.js:6210 ERROR TypeError: Cannot read property 'firstName' of undefined
at UpdateComponent_Template (update.component.html:11)
at executeTemplate (core.js:9600)
at refreshView (core.js:9466)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshEmbeddedViews (core.js:10591)
at refreshView (core.js:9490)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
defaultErrorLogger @ core.js:6210
handleError @ core.js:6258
(anonymous) @ core.js:29567
invoke @ zone-evergreen.js:372
run @ zone-evergreen.js:134
runOutsideAngular @ core.js:28503
tick @ core.js:29567
(anonymous) @ core.js:29436
invoke @ zone-evergreen.js:372
onInvoke @ core.js:28574
invoke @ zone-evergreen.js:371
run @ zone-evergreen.js:134
run @ core.js:28458
next @ core.js:29435
schedulerFn @ core.js:25912
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25902
checkStable @ core.js:28511
onHasTask @ core.js:28591
hasTask @ zone-evergreen.js:426
_updateTaskCount @ zone-evergreen.js:447
_updateTaskCount @ zone-evergreen.js:274
runTask @ zone-evergreen.js:195
drainMicroTaskQueue @ zone-evergreen.js:582
invokeTask @ zone-evergreen.js:491
invokeTask @ zone-evergreen.js:1600
globalZoneAwareCallback @ zone-evergreen.js:1626
when i debug i saw the error comming from [(ngModel)]="studentObject.firstName" but i cannot slove this.
my studenttable.component.ts is ,
import { Component, OnInit } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {StudentService} from "../../student.service";
@Component({
selector: 'app-studenttable',
templateUrl: './studenttable.component.html',
styleUrls: ['./studenttable.component.css']
})
export class StudenttableComponent implements OnInit {
constructor(private studentService:StudentService) { }
studentList:any
listIndex:any
msg=false;
ngOnInit(): void {
this.studentService.getAllStudentDetails().subscribe(result=>{
this.studentList =result
})
}
deleteStudent(id: number) {
this.studentList.findIndex((value:any,i:number)=>{
if(value.id==id){
this.listIndex =i
}
})
this.studentList.splice(this.listIndex,1)
this.studentService.deleteStudentById(id).subscribe(result=>{
this.msg=true;
})
}
}
my studenttable.component.html is ,
<div class="container mt-5" style="margin-bottom: 200px">
<div class="alert alert-dismissible alert-success" *ngIf="msg">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Congratulations!! </strong> Student details deleted successfully.
</div>
<table class="table table-secondary">
<thead>
<tr >
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let students of studentList">
<td>{{students.firstName}}</td>
<td>{{students.lastName}}</td>
<td>{{students.age}}</td>
<td>{{students.phoneNumber}}</td>
<td>
<button class="btn btn-primary mr-4" routerLink="/update/{{students.id}}">Edit</button>
<button class="btn btn-danger" (click)="deleteStudent(students.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
my update.component.ts is,
import { Component, OnInit } from '@angular/core';
import {NgForm} from "@angular/forms";
import {StudentService} from "../../student.service";
import {ActivatedRoute} from "@angular/router";
@Component({
selector: 'app-update',
templateUrl: './update.component.html',
styleUrls: ['./update.component.css']
})
export class UpdateComponent implements OnInit {
constructor(private studentService:StudentService,private activatedRoute:ActivatedRoute) { }
id:any
studentObject:any
msg=false;
ngOnInit(): void {
this.activatedRoute.paramMap.subscribe(result=>{
this.id =result.get("id");
})
this.studentService.getStudentById(this.id).subscribe(result=>{
this.studentObject =result;
})
}
updateStudent(formdata: NgForm) {
const updatedStudent ={
firstName:this.studentObject.firstName,
lastName:this.studentObject.lastName,
age:this.studentObject.age,
phoneNumber:this.studentObject.phoneNumber
}
this.studentService.updateStudentById(updatedStudent,this.id).subscribe(result=>{
this.msg =true;
})
}
}
my update.component.html is,
<div class="container mt-5" style="margin-bottom: 200px">
<div class="alert alert-dismissible alert-success" *ngIf="msg">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Congratulations!! </strong> Student details updated successfully.
</div>
<form #formUdata="ngForm" (ngSubmit)="updateStudent(formUdata)">
<div class="form-group">
<label for="exampleInputF">First Name</label>
<input type="text" class="form-control" id="exampleInputF" placeholder="Enter First Name" name="firstName" [(ngModel)]="studentObject.firstName" #name1="ngModel" required >
<div class="alert alert-danger" *ngIf="!name1.valid">
<span *ngIf="name1?.errors?.required">This field is required</span>
</div>
</div>
<div class="form-group">
<label for="exampleInputL">Last Name</label>
<input type="text" class="form-control" id="exampleInputL" placeholder="Enter Last Name" name="lastName" [(ngModel)]="studentObject.lastName" #name2="ngModel" required>
<div class="alert alert-danger" *ngIf="!name2.valid">
<span *ngIf="name2?.errors?.required">This field is required</span>
</div>
</div>
<div class="form-group">
<label for="exampleInputAge">Age</label>
<input type="number" class="form-control" id="exampleInputAge" placeholder="Enter Age" name="age" [(ngModel)]="studentObject.age" #name3="ngModel" required minlength="2" maxlength="2">
<div class="alert alert-danger" *ngIf="!name3.valid">
<span *ngIf="name3?.errors?.required">This field is required</span>
<span *ngIf="name3?.errors?.minlength">You must enter atleast 2 numbers</span>
</div>
</div>
<div class="form-group">
<label for="exampleInputPNumber">Phone Number</label>
<input type="number" class="form-control" id="exampleInputPNumber" placeholder="Enter Phone Number" name="phoneNumber"[(ngModel)]="studentObject.phoneNumber" #name4="ngModel" required minlength="10" maxlength="10">
<div class="alert alert-danger" *ngIf="!name4.valid">
<span *ngIf="name4?.errors?.required">This field is required</span>
<span *ngIf="name4?.errors?.minlength">You must enter atleast 10 numbers</span>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!formUdata.valid">Update</button>
</form>
</div>
service.ts is,
import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {Student} from "./student";
@Injectable({
providedIn: 'root'
})
export class StudentService {
constructor(private httpClient:HttpClient) { }
getAllStudentDetails():Observable<Student>{
return this.httpClient.get<Student>("http://localhost:8080/student/getstudents")
}
addStudentDetails(data:object):Observable<Student>{
return this.httpClient.post<Student>("http://localhost:8080/student/addstudent",data,);
}
getStudentById(id:number):Observable<Student>{
return this.httpClient.get<Student>("http://localhost:8080/student/getstudent/"+id)
}
updateStudentById(data:object,id:number):Observable<Student>{
return this.httpClient.put<Student>("http://localhost:8080/student/update/"+id,data)
}
deleteStudentById(id:number):Observable<Student>{
return this.httpClient.delete<Student>("http://localhost:8080/student/delete/"+id);
}
}
Plz help me to fix this error,
