FormGroup要求传入一个FormGroup实例。

Question

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

这是 plunkr 链接：

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

- user6123723

Answer 1

您的代码存在一些问题：

• <div [formGroup]="form"> 不在 <form> 标签内
• <form [formGroup]="form"> 但是包含 FormGroup 的属性名称为 loginForm，因此应该改为 <form [formGroup]="loginForm">
• [formControlName]="dob" 传递属性 dob 的值，但这个属性不存在。您需要传递字符串 dob，如 [formControlName]="'dob'" 或更简单的 formControlName="dob"

Plunker 示例

- Günter Zöchbauer

---

还有可能是因为您在.ts文件中没有创建表单。 - Charitha Goonewardena

如果您正在动态创建，请返回已翻译的文本。 - Humble Dolt

在HTML或ts中，名称是区分大小写的。 - afsarkhan10182

如果ngOnInit()中有'await'，可能会发生这种情况，因此在这种情况下，您必须在构造函数中定义表单组。 - Ibra

Answer 2

我曾遇到这个问题，通过在表单属性中添加检查来解决。当FormGroup未初始化时，可能会出现此问题。

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

在初始化之前，这将不会渲染表单。

- Shakoor Hussain Attari

---

我不得不使用ngOnInit()方法来避免这种情况。请删除此内容，如果有人复制它。 - A. Khaled

@amrography，我不太明白你的意思。能否请你再详细解释一下？谢谢。 - Shakoor Hussain Attari

将下列与编程有关的内容从英语翻译成中文。请仅返回已翻译的文本：只需将此部分*ngIf="this.loginForm"修改为*ngIf="loginForm"。 - A. Khaled

这正是我所需要的。 :) - Kit Peters

Answer 3

我正在使用响应式表单并遇到类似的问题。帮助我的方法是确保我在类中设置了相应的 FormGroup，就像这样：

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

- Patrick

Answer 4

我曾经遇到过同样的错误，将formBuilder的初始化从ngOnInit移动到构造函数中后问题得以解决。

- johannesMatevosyan

Answer 5

我也遇到了同样的错误，通过删除async await模式来解决：
原始代码

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

可运行的代码

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

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

- Martin

Answer 6

当我指定 formGroupName 而非 formArrayName 时，出现了这个错误。

请确保正确指定表单组或表单数组。

<div formGroupName="formInfo"/>

<div formArrayName="formInfo"/>

- Tom Benyon

Answer 7

问题代码：

在你的HTML文件中：

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

在您的 TS 文件中：

public myForm!: FormGroup;
public myFormm!: any;

constructor(private formBuilder: FormBuilder) { 
    this.myFormm = this.formBuilder.group({
        firstName: ['',Validators.required]
    });
}

解决方案代码：

请确保您的HTML表单名称和TS文件中的名称是否相同！

在您的HTML文件中：

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

在你的 TS 文件中:

public myForm!: FormGroup;

constructor(private formBuilder: FormBuilder) { 
    this.myForm = this.formBuilder.group({
        firstName: ['',Validators.required]
    });
} 

- Rahul Bavaliya

Answer 8

在我的情况下，出现了错误 this.formGroup==this.fb(......

即等号运算符而不是初始化。

- Zia Khan