Wesley Wesley - 1 month ago 12
TypeScript Question

Property not working in ngModel (Angular2), error

I'm trying to create a form using Angular2, but I am with the following error:

core.umd.js:3370 EXCEPTION: Cannot read property 'ProductName' of undefinedErrorHandler.handleError @ core.umd.js:3370next @ core.umd.js:6838schedulerFn @ core.umd.js:6088SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:6080onError @ core.umd.js:6303onHandleError @ core.umd.js:6179ZoneDelegate.handleError @ zone.js:207Zone.runTask @ zone.js:139drainMicroTaskQueue @ zone.js:368ZoneTask.invoke @ zone.js:308
core.umd.js:3375 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:3375next @ core.umd.js:6838schedulerFn @ core.umd.js:6088SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:6080onError @ core.umd.js:6303onHandleError @ core.umd.js:6179ZoneDelegate.handleError @ zone.js:207Zone.runTask @ zone.js:139drainMicroTaskQueue @ zone.js:368ZoneTask.invoke @ zone.js:308
core.umd.js:3376 TypeError: Cannot read property 'ProductName' of undefined
at AppView._View_ProductAddComponent0.detectChangesInternal (ProductAddComponent.ngfactory.js:542)
at AppView.detectChanges (core.umd.js:9470)
at AppView.detectViewChildrenChanges (core.umd.js:9496)
at AppView.detectChangesInternal (core.umd.js:9481)
at AppView.detectChanges (core.umd.js:9470)
at AppView.detectContentChildrenChanges (core.umd.js:9488)
at AppView._View_AppComponent0.detectChangesInternal (AppComponent.ngfactory.js:469)
at AppView.detectChanges (core.umd.js:9470)
at AppView.detectViewChildrenChanges (core.umd.js:9496)
at AppView._View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.ngfactory.js:86)ErrorHandler.handleError @ core.umd.js:3376next @ core.umd.js:6838schedulerFn @ core.umd.js:6088SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:6080onError @ core.umd.js:6303onHandleError @ core.umd.js:6179ZoneDelegate.handleError @ zone.js:207Zone.runTask @ zone.js:139drainMicroTaskQueue @ zone.js:368ZoneTask.invoke @ zone.js:308
zone.js:357 TypeError: Cannot read property 'ProductName' of undefined(…)


I tried to follow the Angular2 Getting Start Tutorial, changing the variables and objects for what I need. But the error continues happening.
What am I doing wrong?
Here my code.

My model:

export class Product {
constructor(
public ProductName: string,
public ProductDescription: string) { }
}


My component:

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Product } from '../models/product.model'

@Component({
templateUrl: 'templates/Product_Add.html'
})

export class ProductAddComponent {

public title: string = "Add Product"
public product: Product;

product_register(){
}
}


My template:

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ title }}</h3>
</div>
<form #form="ngForm" (ngSubmit)="product_register(form.value)">
<div class="panel-body">
<div class="row">
<div class="form-group col-md-6">
<label>Name</label>
<input type="text" class="form-control" tabindex="1" maxlength="40" [(ngModel)]="product.ProductName"/>
</div>
<div class="form-group col-md-12">
<label>Description</label>
<input type="text" class="form-control" tabindex="2" maxlength="200" [(ngModel)]="product.ProductDescription"/>
</div>
</div>
</div>
<div class="panel-footer">
<a class="btn btn-primary" type="submit">Save</a>&nbsp;
<a class="btn btn-default" type="reset">Reset</a>&nbsp;
</div>
</form>
</div>





I try change my model to:

export interface Product {
ProductName: string;
ProductDescription;
}


and to:

export class Product {
public ProductName: string;
public ProductDescription: string;
}


But the same error appears,
Thanks

Answer

try this

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Product } from '../models/product.model'

@Component({
    templateUrl: 'templates/Product_Add.html'
})

export class ProductAddComponent {

    public title: string = "Add Product"

    private product:Product = new Product();
    //public product: Product;

    product_register(){
    }
}

change the class to

export class Product {
    public ProductName: string;
    public ProductDescription: string;

    constructor(){}
}