Angular - TypeError: Cannot read property 'name' of undefined

Question

I'm not too sure how to phrase the question in a better way, but I need some help in understanding how to resolve this. The following is my error:

TypeError: _co.create is not a function
TypeError: Cannot read property 'name' of undefined

When I try to use newCategory.name in the html, it throws these errors in the console. So I think the problem lies within the HTML.

newCategory is defined in CreateCategoryComponent.ts

newCategory: Category;
name: string;
description: string;

CategoryService.ts

 //ommitted some redundant code
 baseUrl: string = "api/Category";

 createCategory(newCategory: Category) : Observable<any> {

  //Not too sure if newCategory is added correctly here
  return this.httpClient.get<any>(this.baseUrl+"username="+this.sessionService.getUsername()+"&password="+this.sessionService.getPassword() + newCategory).pipe (
    catchError(this.handleError)
    );
  }

CreateCategory.html

<td><input id="name" name="name" #name="ngModel" type="text" [(ngModel)]="newCategory.name" required="true" /></td>

newCategory: Category; this only defines newCategory to be type of Category, but it doesn't initialize values — mxr7350
– mxr7350, Commented Apr 16, 2019 at 14:30
newCategory is declared inside your component, but not defined — Patryk Uszyński
– Patryk Uszyński, Commented Apr 16, 2019 at 14:30
@mxr7350 yes. I missed out that. Thank you. Needed to add this.newCategory = new Category(); — JAYY
– JAYY, Commented Apr 16, 2019 at 14:35

mxr7350 · Accepted Answer · 2019-04-16 14:55:03Z

3

Nothing is wrong with your HTML.

The problem is newCategory: Category; as values are not initialized. All you are doing here is setting newCategory to be type of Category.

You can initialize newCategory on the following ways:

Using new operator

       newCategory: Category = new Category();

I usually declare initial state in Category model file and than import it into appropriate files.

    export const initialState: Category = {
      name: '',
      description: ''
    };

Initialize values in the component

    newCategory: Category = {
      name: '',
      description: ''
    };

edited Apr 16, 2019 at 14:55

answered Apr 16, 2019 at 14:49

mxr7350

1,4543 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rafael Laurindo · Accepted Answer · 2019-04-16 14:32:58Z

2

Your component has 3 attributes:

newCategory: Category;
name: string;
description: string;

Then your needs set/get the attribute name, you'll use: name.

<td><input id="name" name="name" #name="ngModel" type="text" [(ngModel)]="name" required="true" /></td>

Or you needs add name to your newCategory object:

newCategory: Category = {
    name: string, 
    description: string
};

And use newCategory.name in your template:

<td><input id="name" name="name" #name="ngModel" type="text" [(ngModel)]="newCategory.name" required="true" /></td>

Hope this help!

answered Apr 16, 2019 at 14:32

Rafael Laurindo

4742 silver badges7 bronze badges

Comments

Corey Jensen · Accepted Answer · 2021-03-13 08:52:22Z

0

This occurred for me when the page was loaded before the object was returned from an async call. My solutions was an *ngIf block.

<div *ngIf="object"><br />
<b>{{ object.property1}}</b><br />
<i>{{ object.property2}}</i><br />
</div>

answered Mar 13, 2021 at 8:52

Corey Jensen

4495 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular - TypeError: Cannot read property 'name' of undefined

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related