_this.form.get is not a function in angular4
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...
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.
this.editMovieForm = this.fb.group({
movieId : [''],
title: [''],
releaseYear: [''],
plot: [''],
movieLength: ['']
})
But, you are assigning the result of movieService.getMovie()
to the variable.
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.
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.
this.editMovieForm.patchValue(existingMovie, { onlySelf: true });
Ref Updating Angular 2 Forms with patchValue or setValue
Tom
Updated on July 04, 2022Comments
-
Tom almost 2 years
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
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>