Angular 角度4模板驱动形状错误-练习自；“从理论到实践”电子书；

我正在按照阿西姆·侯赛因先生的书中的指示，遇到了一个控制台错误。作为对我自己的一个挑战，我没有像作者在示例中使用的那样使用plunker，我使用angular cli来模拟更真实的开发场景，但我遇到了以下错误：

ModelFormComponent.html:2 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

   Example:


<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});
at Function.webpackJsonp.../../../forms/@angular/forms.es5.js.ReactiveErrors.missingFormException (forms.es5.js:4437)

这只是讲座的乞求，我相信要让表单正常工作还有很多，虽然表单加载并且应用程序没有完全崩溃，但在他的plunker中没有错误，所以问题是，为什么我会出错？提前感谢您。

移动

[formGroup]="myForm"

给构造器。如果构造函数中尚未提供所有必需的信息或数据，则可以在以后对其进行修改

---

第一次角度更新绑定后调用

ngOnInit（）

。这是第一次导致错误，因为

This.myForm

为

null

或

未定义

您的代码中有一个输入错误

将模板中的

myform

替换为

myform

。应该如此

---

我在你的plunker中没有看到任何错误似乎你有一个打字错误

myform

应该是

myform

，在plunker中你到处都使用

myform

，而在你发布的代码中你改变了it@yurzui-您是对的，如果您将此评论移动到我可以标记为已回答的答案。谢谢，好的。按照您的建议移动了块，但仍然收到相同的警告。有什么想法吗？

import { Component } from '@angular/core';
import { ModelFormComponent } from './model-form/model-form.component';


@Component({
  selector: 'app-root',
  template:`
  {{ title }}
  <model-form></model-form>
  `,
})
export class AppComponent {
  title = 'Form Model Driven Exercise';
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormsModule  } from '@angular/forms';

import { AppComponent } from './app.component';
import { ModelFormComponent } from './model-form/model-form.component';

@NgModule({
  declarations: [
    AppComponent,
    ModelFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [
    AppComponent,
    ModelFormComponent]
})
export class AppModule { }

this.myForm = new FormGroup({ ... }}

[formGroup]="myForm"