javascript - angular 2 error: Can't resolve all parameters for FormGroup -


i following thoughtram's tutorial formbuilder http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html copied code , changed few variable names. i'm using angular 2.1.2, typescript 2.0.8, , angular material2 (from google). atom typescript says no error on page. nonetheless, errors @ load, , page not load new code.

zone.js:388 unhandled promise rejection: can't resolve parameters formgroup: (?, ?, ?). ; zone: <root> ; task: promise.then ; value: error: can't resolve parameters formgroup: (?, ?, ?).(…) error: can't resolve parameters formgroup: (?, ?, ?). @ compilemetadataresolver.getdependenciesmetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14598:21) @ compilemetadataresolver.gettypemetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14499:28) @ eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14642:43) @ array.foreach (native) @ compilemetadataresolver.getprovidersmetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14622:21) @ compilemetadataresolver.getdirectivemetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14262:36) @ eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14367:51) @ array.foreach (native) @ compilemetadataresolver.getngmodulemetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14361:51) @ runtimecompiler._compilecomponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17063:49)consoleerror @ zone.js:388_loop_1 @ zone.js:417drainmicrotaskqueue @ zone.js:421zonetask.invoke @ zone.js:339 2016-11-10 16:01:40.394 zone.js:390 error: uncaught (in promise): error: can't resolve parameters formgroup: (?, ?, ?).(…)consoleerror @ zone.js:390_loop_1 @ zone.js:417drainmicrotaskqueue @ zone.js:421zonetask.invoke @ zone.js:339 

html sample apartment4rent.component.html

<form [formgroup]="registerapartment4rentform" (submit)="onsubmit($event)">   <md-input id="country" name="country" class="required" aria-labelledby="country" formcontrolname="country" i18n-placeholder="select country placeholder" placeholder="country" type="text"  size="30" maxlength="30">   </md-input> 

plus 4 more identically state, city, street, , zipcode

appcomponent constructor tutorial - in app folder

import { component, oninit } '@angular/core'; import { formbuilder, formgroup } '@angular/forms'; import { reactiveformsmodule } '@angular/forms';  @component({     moduleid: module.id,     selector: 'residence-app',     templateurl: "components/navigation/headerfooter.html",     styleurls: [ "components/navigation/styleheaderfooter.css" ],     providers: [       formbuilder,       formgroup     ] }) export class appcomponent implements oninit {     registerapartment4rentform: formgroup;     constructor(private formbuilder: formbuilder) {}     ngoninit() {       this.registerapartment4rentform = this.formbuilder.group({         country: '',         stateprovince: '',         address: this.formbuilder.group({           streetaddress: '',           zipcode: '',           city: ''         })       });     } } 

the headerfooter.html in templateurl has html header , footer ,

            <div>                 <router-outlet></router-outlet>             </div> 

in between apartment4rent.component.html loads , appears before tried reactive form code. directory structure app/components/input/apartment4rent.component(s)

what has change make reactive forms work?

did add angular reactive forms module import module? looks it's missing services registered module.

(am on phone, sorry brief answer)

edit

this mean:

import { ngmodule } '@angular/core'; import { browsermodule } '@anglar/platform-browser'; import { reactiveformsmodule } '@angular/forms';  @ngmodule({   imports: [browsermodule, reactiveformsmodule],   declarations: [appcomponent],   bootstrap: [appcomponent] }) export class appmodule {} 

note import of reactiveformsmodule


Comments

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

php - trouble displaying mysqli database results in correct order -

C++ Linked List -