formGroup 需要一个 FormGroup 实例

Question

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

这是 plunkr

错误：

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 的值。您需要的是像 [formControlName]="'dob'" 或更简单的 formControlName="dob"

dob

Plunker example

Answer 2

我正在使用反应形式和运行解决类似的问题。对我有帮助的是确保我在 class 中设置了相应的 FormGroup。像这样：

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

Answer 3

我在指定 fromGroupName instead of formArrayName 时遇到了这个错误。

确保正确指定它是表单数组还是表单组。

<div formGroupName="formInfo"/>

<div formArrayName="formInfo"/>

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

工作代码

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

我认为可能与上面@johannesMatevosyan 的回答有关。我真的不知道为什么，但对我有用。

formGroup 需要一个 FormGroup 实例

formGroup expects a FormGroup instance

angular

angular2-forms

angular2-formbuilder