How to fix “Cannot read property 'title' of undefined”

Question

I'm following Mosh Hamedani tutorial "Angular 4: Beginner to Pro".

I'm trying to show the title of a product in a form when trying to edit it. The product is stored in a firebase database. However, I'm getting this error in the console when I go to the edit form:

ERROR TypeError: Cannot read property 'title' of null
    at ProductFormComponent_Template (product-form.component.html:6)
    at executeTemplate (core.js:7446)
    at refreshView (core.js:7315)
    at refreshComponent (core.js:8453)
    at refreshChildComponents (core.js:7108)
    at refreshView (core.js:7365)
    at refreshEmbeddedViews (core.js:8407)
    at refreshView (core.js:7339)
    at refreshComponent (core.js:8453)
    at refreshChildComponents (core.js:7108)

This question had already been asked here: How to fix "Cannot read property 'title' of undefined", however I tried the solutions provided and I still get the same error. This is a part of my form:

            <div class="form-group">
                <label for="title">Title</label>
                <input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required>
                <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                    Title is Required.
                </div>
            </div>

And this is the component.ts

export class ProductFormComponent implements OnInit {
  categories$;
  product: any = {};

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService,
    private productService: ProductService) { 
    this.categories$ = categoryService.getCategories();

    let id = this.route.snapshot.paramMap.get('id');
    if(id) this.productService.get(id).valueChanges().pipe(take(1)).subscribe(p => this.product = p);
    console.log(this.product);
  }

  save(product){
    this.productService.create(product);
    this.router.navigate(['/admin/products']);
  }

  ngOnInit(): void {
  }

}

Edit: Im using firebase as "backend"

Have you tried stopping your app, then restarting using `ng serve`? Sometimes I get this error simply because my app doesn't recognize the variable I added — Jeremy, Jul 27 '20 at 16:15
Hi, Do you have any API call inside getCategories method in your categoryService? — Ritu, Jul 27 '20 at 16:22
@Ritu get categories works just fine the problem is in last three lines. By the way get method has return this.db.object('/products' + productId); — Juan Esteban Rios Gonzalez, Jul 27 '20 at 16:27

score 1 · Accepted Answer · answered Jul 27 '20 at 18:08

It has an easy solution. The error is displayed because while initializing the html component, product is not ready ( as api call takes some time to return data), so it is undefined. Thus use ?. as shown below in html component.



    <div class="form-group">
                <label for="title">Title</label>
                <input #title="ngModel" [(ngModel)]="product?.title" name="title" id="title" type="text" class="form-control" required>
                <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                    Title is Required.
                </div>
            </div>

    ````

score 0 · Answer 2 · answered Jul 27 '20 at 18:29

Add a question mark after products, means take the title only if the product object is available ie it is already defined.

<div class="form-group"> <label for="title">Title</label> <input #title="ngModel" [(ngModel)]="product?.title" name="title" id="title" type="text" class="form-control" required> <div class="alert alert-danger" *ngIf="title.touched && title.invalid"> Title is Required. </div> </div>

score 0 · Answer 3 · answered Oct 30 '20 at 22:38

0

Wrapping the elements that require the model with an ngIf solves the issue. The content is trying to render before the model is ready.

<ng-container *ngIf="_model">
    CONTENT HERE
</ng-container>

answered Oct 30 '20 at 22:38

code

4,073
3
27
47

How to fix “Cannot read property 'title' of undefined”

3 Answers3