ProductFormComponent.html:6 ERROR TypeError: Cannot read property 'title' of null at Object.eval [as updateDirectives] (

admin-product.component.html

Title	price
{{p.title}}	{{p.price}}	Edit

product-form.component.html

Title

Title is required.

price

price is required.

price should be 0 or higher

        </div>
    </div>
        <div class="form-group">
            <label for="category">Category</label>
            <select  #category="ngModel" id="category"   [(ngModel)]="product.category"  name ="category" class="form-control" required>
                <option  value=""></option>
                <option  *ngFor="let c of categories$ | async " [value]="c.key">
                    {{ c.payload.val().name}}
                    {{ c.payload.val().key}} </option></select>
                    <div class="alert alert-danger" *ngIf="category.touched && category.invalid">
                        category is required.
                    </div>

        </div>
        <div class="form-group">
                <label for="imageUrl">Image Url</label>
                <input #imageUrl="ngModel"  [(ngModel)]="product.imageUrl" name="imageUrl" id="title" type="text" class="form-control" required url>
                <div class="alert alert-danger" *ngIf="imageUrl.touched && imageUrl.invalid">
                  <div *ngIf="imageUrl.errors.required" > imageUrl is required.</div>
                  <div *ngIf="imageUrl.errors.url" > please enter valid url.</div>
                </div>
            </div>
            <button class="btn btn-primary">save</button>
    </form>
</div>
<div class="col-md-6">
    <div class="card" style="width: 18rem;">
        <img src="{{product.imageUrl}}"  *ngIf="product.imageUrl" class="card-img-top" >
        <div class="card-body">
          <h5 class="card-title"> {{ product.title }}</h5>
          <p class="card-text">{{ product.price | currency : 'USD':true}}</p>

        </div>
      </div>
</div>

product.service.ts

import { Injectable } from '@angular/core'; import { AngularFireDatabase } from 'angularfire2/database';

@Injectable({ providedIn: 'root' }) export class ProductService {

constructor(private db: AngularFireDatabase) { }

create(product) { return this.db.list('/products').push(product); }

getAll() { return this.db.list('/products'); }

get(productId){ return this.db.object('/products/' +productId); } }

product-form.component.ts

import { Component, OnInit } from '@angular/core'; import { CategoryService } from '../../category.service'; import { ProductService } from '../../product.service'; import { Router, ActivatedRoute } from '@angular/router';

import {take} from 'rxjs/operators';

@Component({ selector: 'app-product-form', templateUrl: './product-form.component.html', styleUrls: ['./product-form.component.css'] }) export class ProductFormComponent implements OnInit { categories$; product:any = {}; id;

constructor( private router:Router, private route: ActivatedRoute, private categoryService: CategoryService, private productService: ProductService) {

this.categories$ = categoryService.getCategories();

}

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

ngOnInit() { let id = this.route.snapshot.paramMap.get('id'); if(id){

this.productService.get(id).valueChanges().pipe(take(1)).subscribe(p => this.product = p); } }

}

admin-product.component.ts

import { Component, OnInit } from '@angular/core'; import { ProductService } from '../../product.service';

@Component({ selector: 'app-admin-products', templateUrl: './admin-products.component.html', styleUrls: ['./admin-products.component.css'] }) export class AdminProductsComponent implements OnInit { products$;

constructor(private productService:ProductService) { this.products$= this.productService.getAll().valueChanges(); }

ngOnInit() { }

}

lakshmanmunaga commented 5 years ago

any one please help me

bishuadarsh commented 4 years ago

Facing the same issue please help

karthickaadhi commented 3 years ago

any one please help me change: product; To: product:any = {};

karthickaadhi commented 3 years ago

change: product; To: product:any = {};

mosh-hamedani / organic-shop

ProductFormComponent.html:6 ERROR TypeError: Cannot read property 'title' of null at Object.eval [as updateDirectives] ( #12