formGroup需要一个FormGroup实例

Question

我在Plunkr上有一个Angular 2 RC4基本表单示例,似乎抛出以下错误(在Chrome DEV控制台中)

这是傻瓜

https://plnkr.co/edit/GtPDxw?p=preview

错误:

browser_adapter.ts:82 EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./App class App - inline template:1:7
ORIGINAL EXCEPTION: formGroup expects a FormGroup instance. Please pass one in.
           Example: <form [formGroup]="myFormGroup">

ORIGINAL STACKTRACE:
Error: formGroup expects a FormGroup instance. Please pass one in.
           Example: <form [formGroup]="myFormGroup">

    at new BaseException (https://npmcdn.com/@angular/forms@0.2.0/src/facade/exceptions.js:27:23)
    at FormGroupDirective._checkFormPresent (https://npmcdn.com/@angular/forms@0.2.0/src/directives/reactive_directives/form_group_directive.js:110:19)
    at FormGroupDirective.ngOnChanges (https://npmcdn.com/@angular/forms@0.2.0/src/directives/reactive_directives/form_group_directive.js:39:14)
    at DebugAppView._View_App0.detectChangesInter

Answer 1

您的代码中存在一些问题

• <div [formGroup]="form">在<form>标签之外
• <form [formGroup]="form">但包含了属性的名称FormGroup是loginForm因此它应该是<form [formGroup]="loginForm">
• [formControlName]="dob"它传递了dob不存在的属性的值.你需要的是通过串dob状[formControlName]="'dob'"或简单formControlName="dob"

Plunker的例子

Answer 2

我遇到了这个问题并通过检查表单属性来解决。当 FormGroup 未初始化时，可能会发生此问题。

<form [formGroup]="loginForm" *ngIf="loginForm">
OR
<form [formGroup]="loginForm" *ngIf="this.loginForm">

在初始化之前，这不会呈现表单。

Answer 3

我正在使用反应式形式并遇到类似的问题。帮助我的是确保我FormGroup在课堂上设置了相应的。像这样的东西：

myFormGroup: FormGroup = this.builder.group({
    dob: ['', Validators.required]
});

Answer 4

我遇到了同样的错误，并在将formBuilderfrom的初始化ngOnInit移至构造函数后解决了该错误。

Answer 5

我遇到了同样的错误，我解决了从中删除异步等待模式的问题：
原始代码

async ngOnInit()
{
  this.id = await this.route.snapshot.paramMap.get('id');

工作代码

ngOnInit()
{
  this.id = this.route.snapshot.paramMap.get('id');

我认为可能与上面@johannesMatevosyan 的回答有关。我真的不知道为什么，但它正在为我工​​作。