CODEWITHSUNDEEP
htmlangulartypescript
godhar
godhar

Reputation: 1402

caused by: Cannot read property 'product_name' of undefined

When I try to load a html form component in my angular2 app, it will not read a property on one part of the 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 another component that is identical bar the fields and does not encounter this problem when loaded. Components match and I am going mad about this.

Why does it not read that property of 'product_name' .

Heres the 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 } from '@angular/core';
import { Material } from './material';
import { MaterialService } from './material.service';
import { Observable } from '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);
                          }
                    )
 }

}

Upvotes: 1

Views: 2282

Answers (2)

AVJT82
AVJT82

Reputation: 73367

You error points to [(ngModel)]="material.product_name"

Your material object is undefined, because you have not initialized it. So all you need to do, is to initialize your Object.

So change:

material : Material;

to

material : Material = <Material>{};

and it will no longer be undefined.

Upvotes: 4

Sarun Intaralawan
Sarun Intaralawan

Reputation: 1142

You should use async pipe to unwrap the Observable because it does the job of subscribing and unsubscribing automatically.

What you'll need to do:

TS Code:

material: Observable<Material>;

// In createMaterial
this.material = this.materialService.createMaterial(material);

Template:

[(ngModel)]="(material | async)?.product_name"

The ? will check if material | async is undefined.

Upvotes: 0

Related Questions