title: TypeError: Cannot read property 'form' of undefined
body: <p>I just want to say that I'm a beginner with MEAN applications and I'm trying to build a MEAN Stack (Angular 5) Create-Read-Update-Delete (CRUD) Web Application from scratch using Angular CLI.</p>
  
  <p>I am trying to create a component that will add a proposal do my database. I can't seem to find why I'm getting an error.</p>
  
  <p>This is how my proposal-create.component.html looks like:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;h1&gt;Add New Proposal&lt;/h1&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-6"&gt;
  &lt;form (ngsubmit)="saveProposal()" #proposalform="ngForm"&gt;
  &lt;div class="form-group"&gt;
  &lt;label for="name"&gt;boat_type&lt;/label&gt;
  &lt;input type="text" class="form-control" [(ngModel)]="proposal.boat_type" 
   name="boat_type" required=""&gt;
   &lt;/div&gt;
  &lt;div class="form-group"&gt;
  &lt;label for="name"&gt;service&lt;/label&gt;
  &lt;input type="text" class="form-control" [(ngModel)]="proposal.service" 
   name="service" required=""&gt;
   &lt;/div&gt;
   &lt;div class="form-group"&gt;
   &lt;label for="name"&gt;location&lt;/label&gt;
   &lt;input type="text" class="form-control" [(ngModel)]="proposal.location" 
    name="location" required=""&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
    &lt; label for="name"&gt;job_type&lt;/label&gt;
    &lt;input type="text" class="form-control" [(ngModel)]="proposal.job_type" 
     name="job_type" required=""&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
     &lt;label for="name"&gt;status&lt;/label&gt;
     &lt;input type="text" class="form-control" [(ngModel)]="proposal.status" 
     name="status" required=""&gt;
     &lt;/div&gt;
  
     &lt;div class="form-group"&gt;
     &lt;button type="submit" class="btn btn-success" 
      [disabled]="!proposalForm.form.valid"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>my proposal-create.component.ts</p>
  
  <pre><code> import { Component, OnInit ,ViewEncapsulation} from '@angular/core';
   import { Router } from '@angular/router';
   import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  
   @Component({
   selector: 'app-proposal-create',
   templateUrl: './proposal-create.component.html',
   styleUrls: ['./proposal-create.component.css'],
   encapsulation: ViewEncapsulation.None
   })
   export class ProposalCreateComponent implements OnInit {
  
    proposal = { 
    boat_type: '',
    service  : '', 
    location : '',
    job_type : '',
    status   : ''
    };
  
    constructor(private http: HttpClient, private router: Router) { }
  
    ngOnInit() {
    }
  
  
    saveProposal() {
    this.http.post('/proposal', this.proposal)
    .subscribe(res =&gt; {
        let id = res['_id'];
        this.router.navigate(['/proposal-details', id]);
      }, (err) =&gt; {
        console.log(err);
      }
    );
     }
  
      }
  </code></pre>
  
  <p>I already added the route in the <code>src/app/app.module.ts</code> and also I did import the FormsModule.</p>