html - caused by: Cannot read property 'product_name' of undefined -

when try load html form component in angular2 app, not read property on 1 part of form.

exception: uncaught (in promise): error: error in  http://localhost:3000/app/material/material-new.component.html:15:7  caused by: cannot read property 'product_name' of undefined 

i have component identical bar fields , not encounter problem when loaded. components match , going mad this.

why not read property of 'product_name' .

heres code.

create material

<div class="card container form-container">  <div class="row">  <div class="col-md-12">   <form (ngsubmit)="creatematerial(material)" #materialform="ngform"  >     <div class="form-group">        <label class="label-text" for="product_name">product             name</label>           <input type="text"           class="form-control"              id="product_name"              placeholder="product name"              required             name="product_name"             #product_name='ngmodel'             [(ngmodel)]="material.product_name">            <div [hidden]="product_name.valid || product_name.pristine">                  input product name            </div>     </div>   import { component } '@angular/core'; import { material } './material'; import { materialservice } './material.service'; import { observable } 'rxjs/rx';  @component({  moduleid: module.id,  selector: 'material-new',  templateurl: 'material-new.component.html',  styleurls: ['material-new.component.css'],  providers: [ materialservice ]  })   export class materialnewcomponent {  material : material; submitted : boolean = false;   constructor(   private materialservice : materialservice ) {}  creatematerial( material : material) {   this.submitted = true;   this.materialservice.creatematerial(material)                     .subscribe(                       data => { return true },                       error => { console.log("error saving material")                             return observable.throw(error);                           }                     )  } 

}

you error points [(ngmodel)]="material.product_name"

your material object undefined, because have not initialized it. need do, initialize object.

so change:

material : material; 

to

material : material = <material>{}; 

and no longer undefined.