Reputation: 161
I am developing an angular application which consists of one parent component ( products) designed for listing the details using pagonation and child component Product details to view the details of individual products for which i have used angular forms. The form page is loading the data correctly from the restful api But in addition i am getting the below error in the console when ever i navigate from listing page to Individual product detail display page, I could not able figure out the reason for this error.
ERROR TypeError: Cannot read property 'id' of undefined
at ProductDetailsComponent_Template (product-details.component.html:7)
at executeTemplate (core.js:12210)
at refreshView (core.js:12049)
at refreshComponent (core.js:13499)
at refreshChildComponents (core.js:11770)
at refreshView (core.js:12105)
at refreshEmbeddedViews (core.js:13445)
at refreshView (core.js:12076)
at refreshComponent (core.js:13499)
at refreshChildComponents (core.js:11770)
Code Details are below:
Mapping model class to map the response form restful api
export interface productDetailsData{
id:number;
items:string;
brand:string;
colour:string;
size:string;
type:string;
}
export class ProductDetailsComponent implements OnInit {
idval:number;
productDetail:productDetailsData;
constructor(private router:Router,private route:ActivatedRoute,private randomUser:RandomuserService){
this.route.params.subscribe((param:Params) =>{
this.idval=+param['id'];
console.log(this.idval);
});
}
ngOnInit(): void {
this.randomUser.getIndividulProductDetail(this.idval).subscribe(data => {
/*** fetching the details from api *****/
this.productDetail={...data};
console.log('the data form response ',this.productDetail);
});
}
onSubmit(form:NgForm){
console.log(form.value);
this.productDetail={...form.value};
console.log(this.productDetail);
this.randomUser.saveData(this.productDetail).subscribe(data => {
console.log('successfully stired'); });
}
}
<div class="container">
<div class="row">
<div class=" .col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<div class="form-group" >
<label for="id">ID</label>
<input type="text" id="id" class="form-control" ngModel name="id" [(ngModel)]="productDetail.id">
</div>
<div class="form-group">
<label for="id">ITEMS</label>
<input type="text" id="items" class="form-control" ngModel name="items" [(ngModel)]="productDetail.items">
</div>
<div class="form-group">
<label for="brand">Brand</label>
<input type="text" id="brand" class="form-control" ngModel name="brand" [(ngModel)]="productDetail.brand" >
</div>
<div class="form-group">
<label for="colour">COLOUR</label>
<input type="text" id="colour" class="form-control" ngModel name="colour" [(ngModel)]="productDetail.colour">
</div>
<div class="form-group">
<label for="size">size</label>
<input type="text" id="size" class="form-control" ngModel name="size" [(ngModel)]="productDetail.size">
</div>
<div class="form-group">
<label for="type">TYPE</label>
<input type="text" id="type" class="form-control" ngModel name="type" [(ngModel)]="productDetail.type">
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
</div
Upvotes: 1
Views: 1040
Reputation: 692
You might be getting that error because productDetail
does not have a value initially.
Either initialize it or use the Elvis operator (?) like below:
<input type="text" id="id" class="form-control" ngModel name="id [(ngModel)]="productDetail?.id">
Upvotes: 2
Reputation: 6016
You are using productDetail
as ngModel which means that it's Two way binding.
So it's start evaluating productDetail
once the view is initialized where initial value of it is undefined, hence the error.
Try to initialize it in constructor or in ngOnInit like below,
this.productDetail = {} as productDetailsData;
Happy Coding.. :)
Upvotes: 1