web-dev-qa-db-ja.com

formGroupにはFormGroupインスタンスが必要です

PlunkrにAngular 2 RC4基本フォームの例があり、次のエラーがスローされるようです（Chrome DEVコンソール）

これが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/[email protected]/src/facade/exceptions.js:27:23)
    at FormGroupDirective._checkFormPresent (https://npmcdn.com/@angular/[email protected]/src/directives/reactive_directives/form_group_directive.js:110:19)
    at FormGroupDirective.ngOnChanges (https://npmcdn.com/@angular/[email protected]/src/directives/reactive_directives/form_group_directive.js:39:14)
    at DebugAppView._View_App0.detectChangesInter
angularangular2-formsangular2-formbuilder
35
user6123723

コードにはいくつかの問題があります

  • <div [formGroup]="form">タグの外側の<form>
  • <form [formGroup]="form">がFormGroupを含むプロパティの名前はloginFormであるため、<form [formGroup]="loginForm">になります
  • [formControlName]="dob"はプロパティの値を渡しますdobは存在しません。必要なのは、[formControlName]="'dob'"またはより単純なformControlName="dob"のような文字列dobを渡すことです

プランカーの例

53
Günter Zöchbauer

リアクティブフォームを使用していて、同様の問題に遭遇しました。クラスで対応するFormGroupを確実に設定することで助けられました。このようなもの：

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

formArrayName ではなく fromGroupName を指定したときにこのエラーが発生しました。

フォーム配列かフォームグループかを正しく指定してください。

<div formGroupName="formInfo"/>

<div formArrayName="formInfo"/>

1
Tom Benyon