angular - 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

score 85 · Accepted Answer

您的代码中存在一些问题

<div [formGroup]="form">在<form>标签之外
<form [formGroup]="form">FormGroup但是包含is的属性的名称loginForm因此应该是<form [formGroup]="loginForm">
[formControlName]="dob"它传递dob不存在的属性的值。您需要的是传递dob类似[formControlName]="'dob'"或更简单的字符串formControlName="dob"

Plunker 示例

score 50 · Accepted Answer

我正面临这个问题，并通过在表单属性中添加检查来解决。当 FormGroup 未初始化时，可能会发生此问题。

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

这将不会呈现表单，直到它被初始化。

score 10 · Accepted Answer

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

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

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

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

工作代码

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

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

score 2 · Accepted Answer

当我指定fromGroupName而不是formArrayName时出现此错误。

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

<div formGroupName="formInfo"/>

<div formArrayName="formInfo"/>

angular - formGroup 需要一个 FormGroup 实例

6 回答 6

Related

Reference