title: _this.form.get is not a function in angular4
body: <p>I developing a angular 4 application and facing a problem while binding the data to the form. The binding code seems to be fine and not sure what the problem is. When I debug the application , I can see the result is populated correctly it the following line of code  this.editMovieForm = result; in  setFormValues() method . When I check the console window , I see the following error</p>
  
  <pre><code>EditmovieComponent.html:1 ERROR TypeError: _this.form.get is not a function
      at forms.es5.js:4907
      at Array.forEach (&lt;anonymous&gt;)
      at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective._updateDomValue (forms.es5.js:4906)
      at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.ngOnChanges (forms.es5.js:4774)
      at checkAndUpdateDirectiveInline (core.es5.js:10840)
      at checkAndUpdateNodeInline (core.es5.js:12341)
      at checkAndUpdateNode (core.es5.js:12284)
      at debugCheckAndUpdateNode (core.es5.js:13141)
      at debugCheckDirectivesFn (core.es5.js:13082)
      at Object.eval [as updateDirectives] (EditmovieComponent.html:1)
  
  
  ERROR Error: Uncaught (in promise): TypeError: _this.editMovieForm.patchValue is not a function
  TypeError: _this.editMovieForm.patchValue is not a function
      at main.bundle.js:446
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.bundle.js:2908)
      at Object.onInvoke (vendor.bundle.js:146628)
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.bundle.js:2907)
      at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (polyfills.bundle.js:2658)
      at polyfills.bundle.js:3389
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2941)
      at Object.onInvokeTask (vendor.bundle.js:146619)
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2940)
      at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:2708)
      at main.bundle.js:446
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.bundle.js:2908)
      at Object.onInvoke (vendor.bundle.js:146628)
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.bundle.js:2907)
      at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (polyfills.bundle.js:2658)
      at polyfills.bundle.js:3389
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2941)
      at Object.onInvokeTask (vendor.bundle.js:146619)
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2940)
      at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:2708)
      at resolvePromise (polyfills.bundle.js:3340)
      at polyfills.bundle.js:3392
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2941)
      at Object.onInvokeTask (vendor.bundle.js:146619)
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2940)
      at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:2708)
      at drainMicroTaskQueue (polyfills.bundle.js:3118)
      at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (polyfills.bundle.js:3019)
      at invokeTask (polyfills.bundle.js:4056)
      at XMLHttpRequest.globalZoneAwareCallback (polyfills.bundle.js:4082)
  </code></pre>
  
  <p><strong>editmovie.component.ts</strong></p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
      import {Router,ActivatedRoute,Params} from '@angular/router';
      import {FormGroup,FormControl,FormBuilder} from '@angular/forms';
      import {IMovie} from '../movie.interface';
      import {MovieService} from '../movie.service';
  
      @Component({
        selector: 'app-editmovie',
         moduleId: module.id,
        templateUrl: './editmovie.component.html',
        styleUrls: ['./editmovie.component.css'],
         providers:[MovieService]
      })
      export class EditmovieComponent implements OnInit {
  
      public selectMovieId: number = 0;
      public sub : any;
      public editMovieForm: FormGroup;
      public movie: IMovie;
  
        constructor(private _route: ActivatedRoute,
                    private fb: FormBuilder,
                    private movieService : MovieService  ) {
                this.initializeFormModel();
          } 
  
        ngOnInit() {
          this.sub = this._route.params.subscribe(params =&gt; {
            this.selectMovieId = + params['id']; // (+) converts string to number
          });
          this.initializeFormModel();
  
          if(this.selectMovieId &amp;&amp; this.selectMovieId &gt; 0) {
            this.setFormValues();
          }
        }
  
  
        initializeFormModel()
        {
          this.editMovieForm = this.fb.group({
            movieId : [''],
            title: [''],
            releaseYear: [''],
            plot: [''],
            movieLength: ['']
  
          })
  
        }
  
      setFormValues(){
          var existingMovie: IMovie;
          this.movieService.getMovie(this.selectMovieId).then((result: any)=&gt; {
          existingMovie = result;
          this.movie = existingMovie;  
          this.editMovieForm = result;
            this.editMovieForm.patchValue(existingMovie, { onlySelf: true });
          });
  
      }  
  
  
      }
  </code></pre>
  
  <p><strong>editmovie.component.html</strong></p>
  
  <pre><code>&lt;form [formGroup] = "editMovieForm"&gt;
      &lt;div class ="col-sm-12"&gt; 
        &lt;div class="form-group col-sm-6"&gt;
          &lt;label for="movie-title" class="control-label"&gt;Title&lt;/label&gt;
          &lt;input type="text" class="form-control" id= "movie-title" placeholder="Title of Movie" formControlName="title" maxlength="100"&gt;
        &lt;/div&gt;
        &lt;div class="form-group col-sm-6"&gt;
          &lt;label for="release-year" class="control-label"&gt;Release Year&lt;/label&gt;
          &lt;input type="text" class="form-control" id="release-year" placeholder="Release Year" formControlName="releaseYear" maxlength="4"&gt;
        &lt;/div&gt; 
      &lt;/div&gt;
      &lt;div class ="col-sm-12"&gt; 
        &lt;div class="form-group col-sm-6"&gt;
          &lt;label for="movie-plot" class="control-label"&gt;Plot&lt;/label&gt;
          &lt;input type="text" class="form-control" id= "movie-plot" placeholder="Plot" formControlName="plot" maxlength="100"&gt;
        &lt;/div&gt;
        &lt;div class="form-group col-sm-6"&gt;
        &lt;label for="movie-length" class="control-label"&gt;Movile Length&lt;/label&gt;
          &lt;input type="text" class="form-control" id= "movie-length" placeholder="Movie Length" formControlName="movieLength" maxlength="100"&gt;
        &lt;/div&gt; 
      &lt;/div&gt;
  
  
  &lt;/form&gt;
  </code></pre>