我开发了一个角度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>
答案 0 :(得分:3)
从你的问题,
我可以看到结果正确地填充了setFormValues()方法中的以下代码行 this.editMovieForm = result; 。当我检查控制台窗口时,我看到以下错误...
我认为按照粗体行显示错误。
FormBuilder如下所示创建editMovieForm
,我假设在实例对象中添加了一系列操作所需的方法。
this.editMovieForm = this.fb.group({
movieId : [''],
title: [''],
releaseYear: [''],
plot: [''],
movieLength: ['']
})
但是,您要将movieService.getMovie()
的结果分配给变量。
我粗略猜测result
不是FormGroup对象,如果是这样,它不再是这样的功能并不令人惊讶。
this.movieService.getMovie(this.selectMovieId).then((result: any)=> {
...
this.editMovieForm = result;
...
});
请尝试注释掉该行,看看错误是否消失。
我认为您会发现使用patchValue
后面的行是将结果添加到表单所需的全部内容。
this.editMovieForm.patchValue(existingMovie, { onlySelf: true });
答案 1 :(得分:0)
您的editMovieForm属性是FormGroup类型。 Doc:https://angular.io/api/forms/FormGroup
我认为你的方法 this.movieService.getMovie() 会返回一个电影数组。 在回调中,您要使用不同的类型值设置 editMovieForm ,该值为电影数组且不包含patchValue函数。
您必须删除行代码:
this.editMovieForm = result;
然后使用PatchValue或SetValue为editMovieForm修补或设置值。
答案 2 :(得分:0)
这可以解决您的问题。
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;
}