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
Post a Comment