_this.form。get在angular4中不是函数

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

我开发了一个角4的应用程序，并在将数据绑定到表单时遇到了问题。绑定代码看起来很好，但是不确定问题出在哪里。当我调试应用程序时，我可以看到结果被正确地填充了如下代码行。editMovieForm =结果;在setFormValues()方法。当我检查控制台窗口时，我看到以下错误

EditmovieComponent.html:1 ERROR TypeError: _this.form.get is not a function
    at forms.es5.js:4907
    at Array.forEach (<anonymous>)
    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)

editmovie.component.ts

editmovie.component.ts

    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 => {
          this.selectMovieId = + params['id']; // (+) converts string to number
        });
        this.initializeFormModel();

        if(this.selectMovieId && this.selectMovieId > 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)=> {
        existingMovie = result;
        this.movie = existingMovie;  
        this.editMovieForm = result;
          this.editMovieForm.patchValue(existingMovie, { onlySelf: true });
        });

    }  


    }

editmovie.component.html

editmovie.component.html

<form [formGroup] = "editMovieForm">
    <div class ="col-sm-12"> 
      <div class="form-group col-sm-6">
        <label for="movie-title" class="control-label">Title</label>
        <input type="text" class="form-control" id= "movie-title" placeholder="Title of Movie" formControlName="title" maxlength="100">
      </div>
      <div class="form-group col-sm-6">
        <label for="release-year" class="control-label">Release Year</label>
        <input type="text" class="form-control" id="release-year" placeholder="Release Year" formControlName="releaseYear" maxlength="4">
      </div> 
    </div>
    <div class ="col-sm-12"> 
      <div class="form-group col-sm-6">
        <label for="movie-plot" class="control-label">Plot</label>
        <input type="text" class="form-control" id= "movie-plot" placeholder="Plot" formControlName="plot" maxlength="100">
      </div>
      <div class="form-group col-sm-6">
      <label for="movie-length" class="control-label">Movile Length</label>
        <input type="text" class="form-control" id= "movie-length" placeholder="Movie Length" formControlName="movieLength" maxlength="100">
      </div> 
    </div>


</form>

3 个解决方案

#1

From your question,

从你的问题,

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...

我可以看到结果被正确地填充了如下一行代码。editMovieForm =结果;在setFormValues()方法。当我检查控制台窗口时，我看到以下错误……

I take it that following the line in bold you spot the error.

我认为沿着黑体线你会发现错误。

FormBuilder creates editMovieForm as below, and I'm presuming there's a bunch of methods added to the instance object that are required for it to operate.

FormBuilder创建editMovieForm，如下所示，我假设有一堆方法添加到实例对象中，实例对象操作需要这些方法。

this.editMovieForm = this.fb.group({
  movieId : [''],
  title: [''],
  releaseYear: [''],
  plot: [''],
  movieLength: ['']
})

But, you are assigning the result of movieService.getMovie() to the variable.

但是，您正在将movieService.getMovie()的结果分配给变量。

I'm taking a wild guess that result is not a FormGroup object, if so it's not really surprising that it no longer functions as such.

我大胆地猜测结果不是FormGroup对象，如果是这样的话，那么它就不再像FormGroup对象那样运行也就不足为奇了。

this.movieService.getMovie(this.selectMovieId).then((result: any)=> {
  ...
  this.editMovieForm = result;
  ...
});

Please try commenting out the line and see if the error disappears.

请试着把这行注释掉，看看错误是否消失。

I think you'll find that the line following with patchValue is all you need to add the result to the form.

我想你会发现，使用patchValue后面的行就是你添加结果到表单中所需要的。

this.editMovieForm.patchValue(existingMovie, { onlySelf: true });

Ref Updating Angular 2 Forms with patchValue or setValue

用patchValue或setValue更新有角的2个表单

#2

Your editMovieForm property is a FormGroup type. Doc : https://angular.io/api/forms/FormGroup

editMovieForm属性是FormGroup类型。医生:https://angular.io/api/forms/FormGroup

I suppose your method this.movieService.getMovie() return an Array of Movie. In your callback, you are setting your editMovieForm with a different type value which is Array of Movie and doesn't contain patchValue function.

我假设您的方法this.movieService.getMovie()返回一个Movie数组。在回调中，使用不同的类型值设置editMovieForm，该类型值是Movie的数组，不包含patchValue函数。

You have to remove your line code :

您必须删除您的行代码:

this.editMovieForm = result;

Then patch or set values to your editMovieForm using PatchValue or SetValue.

然后，使用patch值或SetValue将值设置为您的editMovieForm。

#3

This should solve your problem.

这应该能解决你的问题。

initializeFormModel()
  {
    this.editMovieForm = this.fb.group({
      movieId : [this.movie.movieId],
      title: [this.movie.title],
      releaseYear: [this.movie.releaseYear],
      plot: [this.movie.plot],
      movieLength: [this.movie.movieLength]

    })

  }

setFormValues(){
    this.movieService.getMovie(this.selectMovieId).then((result: any)=> {
    this.movie = result;  
}