Karthikeyan
Karthikeyan

Reputation: 161

Cannot read property 'id' of undefined in angular forms

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

Answers (2)

Rajat
Rajat

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

Ganesh
Ganesh

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

Related Questions