title: (Angular) TypeError: Cannot read property 'StartDate' of undefined
body: <p>I've spent almost 3 weeks with Angular 5 and fairly new to web development. I'm trying to send a '<em>Date</em>' type datatype from the component.html to the component.ts which further sends it to a service.</p>
  
  <p>However, I don't know why I get the above <a href="https://i.stack.imgur.com/e360x.jpg" rel="nofollow noreferrer"><strong>error</strong> (screenshot)</a> cause I did exactly the same thing in another component and it still works fine. It's probably a rookie mistake, but after countless searching, most of the solutions either didn't fit my problem or they were way beyond my level of understanding.</p>
  
  <blockquote>
    <p>rooms.component.ts   </p>
  </blockquote>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { DatepickerOptions } from 'ng2-datepicker';
  import { NgModule } from '@angular/core';
  import { NgForm } from '@angular/forms';
  import { Room } from './room.model';
  import { RoomsService } from './rooms.service';
  
  @Component({
    selector: 'app-rooms',
    templateUrl: './rooms.component.html',
    styleUrls: ['./rooms.component.css'],
    providers:[RoomsService]
  })
  
  export class RoomsComponent implements OnInit {
  
    constructor(private roomService: RoomsService) {
     }
  
    ngOnInit() {  
    }
  
    onSubmit(form: NgForm)
    {
      console.log(form.value);
    }    
  }
  </code></pre>
  
  <blockquote>
    <p>rooms.component.html</p>
  </blockquote>
  
  <pre><code>&lt;form #roomForm="ngForm" (ngSubmit)="onSubmit(roomForm)"&gt;    
    &lt;div  class="form-row"&gt;    
      &lt;div class="form-group col-md-6"&gt;
        &lt;input type="date" class="form-control" name="StartDate" #StartDate="ngModel" [(ngModel)]="roomService.userSelection.StartDate" placeholder="Start Date" required&gt; 
      &lt;/div&gt;
  
      &lt;div class="form-group col-md-6"&gt;
          &lt;input type="date" class="form-control" name="EndDate" #EndDate="ngModel" [(ngModel)]="roomService.userSelection.EndDate" placeholder="End Date" required&gt; 
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-row"&gt;    
        &lt;div class="form-group col-md-8"&gt;
          &lt;button type="submit" class="btn btn-lg btn-block btn-info"&gt;&lt;i class="fa fa-floppy-o" aria-hidden="true"&gt;&lt;/i&gt; Submit&lt;/button&gt; 
        &lt;/div&gt;     
    &lt;/div&gt;   
  &lt;/form&gt;
  </code></pre>
  
  <blockquote>
    <p>rooms.service.ts</p>
  </blockquote>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Room } from './room.model';
  import { Http, Response, Headers, RequestOptions, RequestMethod } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/toPromise';
  import { HttpClientModule } from '@angular/common/http';
  import { HttpModule } from '@angular/http';
  
  
  
  @Injectable()
  export class RoomsService {
  
    userSelection:Room;
    roomList: Room[];      
  
    constructor(private http: Http) {       
     }
  
    getRoomList(StartDate, EndDate){
      this.http.get('http://localhost:17518/api/RoomPriceAndStatus')
      .map((data: Response)=&gt;{
        return data.json() as Room[];
      }).toPromise().then(x =&gt;{
        this.roomList = x;
      })
    }
  }
  </code></pre>
  
  <blockquote>
    <p>room.model.ts</p>
  </blockquote>
  
  <pre><code>export class Room{
      Id: number;
      StartDate: Date;
      EndDate: Date;
  
  }
  </code></pre>