_this.form.get不是angular4中的函数
我开发一个角度4应用程序,并在将数据绑定到表单时遇到问题.绑定代码似乎很好,不知道问题是什么.当我调试应用程序时,我可以看到结果正确填充了下面的代码行this.editMovieForm = result;在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 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 <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>
从你的问题,
我认为按照粗体线你会发现错误. FormBuilder如下所示创建editMovieForm,我假设有一堆方法添加到实例对象中,它是操作所必需的. this.editMovieForm = this.fb.group({ movieId : [''],movieLength: [''] }) 但是,您将movieService.getMovie()的结果分配给变量. 我猜测结果不是FormGroup对象,如果是这样的话,它不再具有这样的功能并不令人惊讶. this.movieService.getMovie(this.selectMovieId).then((result: any)=> { ... this.editMovieForm = result; ... }); 请尝试注释掉该行,看看错误是否消失. 我想你会发现跟随patchValue的行是将结果添加到表单所需的全部内容. this.editMovieForm.patchValue(existingMovie,{ onlySelf: true }); 参考Updating Angular 2 Forms with patchValue or setValue (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |