title: ERROR TypeError: Cannot read property 'title' of undefined
body: <p>I've been battling with these block of codes for some days, and even when i try initializing it as an object i get errors.</p>
  
  <p>this is my restaurantForm.ts file
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import {RestaurantService} from '../../restaurant.service';
  import {ProductService} from '../../product.service';
  import {ActivatedRoute, Router} from '@angular/router';
  import 'rxjs/add/operator/take';
  import {Product} from '../../model/product';
  
  @Component({
    selector: 'app-product-form',
    templateUrl: './restaurant-form.component.html',
    styleUrls: ['./restaurant-form.component.css']
  })
  export class RestaurantFormComponent implements OnInit {
    restaurants$;
    id;
    product: Product;
    constructor(private restaurantService: RestaurantService,
                private productService: ProductService,
                private route: ActivatedRoute,
                private router: Router) {
      this.restaurants$ = this.restaurantService.getAll();
      this.id = this.route.snapshot.paramMap.get('id');
      if (this.id) {
        this.productService.get(this.id).take(1).subscribe(p =&gt; this.product = p);
      }
     this.product = new Product();
    }
    save(product) {
      if (this.id) {
        this.productService.update(this.id, product);
      } else {
        this.productService.create(product);
      }
      this.router.navigate(['/admin/restaurants']);
    }
    delete() {
      if (!confirm('Are you sure you want to delete this product?')) { return ; }
        this.productService.delete(this.id);
        this.router.navigate(['/admin/restaurants']);
    }
  
    ngOnInit() {
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is my product model </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export interface Product {
    $key: string;
    title: string;
    price: number;
    restaurant: string;
    imageUrl: string;
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>My restaurantForm.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
        &lt;form #f="ngForm" (ngSubmit)="save(f)"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="title"&gt;Title&lt;/label&gt;
            &lt;input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required&gt;
            &lt;div class="alert-danger alert" *ngIf="title.touched &amp;&amp; title.invalid"&gt;
              Title is required.
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="price"&gt;Delivery Price&lt;/label&gt;
            &lt;div class="input-group"&gt;
              &lt;span class="input-group-addon"&gt;₦&lt;/span&gt;
              &lt;input #price="ngModel" [(ngModel)]="product.price" name="price" id="price"
                     type="number" class="form-control" required [min]="0"&gt;
            &lt;/div&gt;
            &lt;div class="alert alert-danger" *ngIf="price.touched &amp;&amp; price.invalid"&gt;
              &lt;div *ngIf="price.errors.required"&gt;
                Delivery Price is required
              &lt;/div&gt;
              &lt;div *ngIf="price.errors.min"&gt;
                Delivery Price should be 0 or higher.
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="restaurant"&gt;Restaurant&lt;/label&gt;
            &lt;select #restaurant="ngModel" [(ngModel)]="product.restaurant" name="restaurant" id="restaurant" class="form-control" required&gt;
              &lt;option value=""&gt;&lt;/option&gt;
              &lt;option *ngFor="let r of restaurants$ | async" [value]="r.$key"&gt;
                {{ r.name }}
              &lt;/option&gt;
            &lt;/select&gt;
            &lt;div class="alert alert-danger" *ngIf="restaurant.touched &amp;&amp; restaurant.invalid"&gt;
              Please select a restaurant.
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="imageUrl"&gt;Image Url&lt;/label&gt;
            &lt;input #imageUrl="ngModel" [(ngModel)]="product.imageUrl" name="imageUrl"
                   id="imageUrl" type="text" class="form-control" required url&gt;
            &lt;div class="alert alert-danger" *ngIf="imageUrl.touched &amp;&amp; imageUrl.invalid"&gt;
              &lt;div *ngIf="imageUrl.errors.required"&gt;Image Url is required.&lt;/div&gt;
              &lt;div *ngIf="imageUrl.errors.url"&gt;Please enter a valid Url.&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;button  class="btn btn-primary"&gt;Save&lt;/button&gt;
          &lt;button type="button" (click)="delete()" class="btn btn-danger"&gt;Delete&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
       &lt;app-product-card [product]="product" [showActions]="false"&gt;&lt;/app-product-card&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I get the same errors with price, $key, restaurant and imageUrl.
  thanks in advance. Although Ive looked up some solutions saying i should use elvis Operator e.g 'product?.title' this method isnt still working.</p>