Question

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

这里是傻瓜

错误：

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 example

Answer 2

我遇到了这个问题，并通过在form属性中添加了一个检查项来解决。未初始化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

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

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

工作代码

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

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

Answer 5

当我指定fromGroupName而不是formArrayName时遇到此错误。

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

<div formGroupName="formInfo"/>

<div formArrayName="formInfo"/>

Answer 6

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

formGroup需要一个FormGroup实例

6 个答案: