web-dev-qa-db-fra.com

formGroup attend une instance de FormGroup

J'ai un exemple de formulaire de base Angular 2 RC4 sur Plunkr qui semble générer l'erreur suivante (dans la console Chrome DEV)

Voici le plunkr

https://plnkr.co/edit/GtPDxw?p=preview

Erreur:

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

Il y a quelques problèmes dans votre code

  • <div [formGroup]="form"> en dehors d'une balise <form>
  • <form [formGroup]="form"> mais le nom de la propriété contenant la FormGroup est loginForm et doit donc être <form [formGroup]="loginForm">.
  • [formControlName]="dob" qui transmet la valeur de la propriété dob qui n'existe pas. Ce dont vous avez besoin est de passer la chaîne dob comme [formControlName]="'dob'" ou plus simple formControlName="dob"

Exemple de Plunker

53
Günter Zöchbauer

J'utilisais des formulaires réactifs et rencontrais des problèmes similaires. Ce qui m’a aidé, c’est de m’assurer que j’ai mis en place un FormGroup correspondant dans la classe. Quelque chose comme ça:

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

J'ai eu cette erreur quand j'avais spécifié fromGroupName au lieu de formArrayName .

Assurez-vous de spécifier correctement s'il s'agit d'un tableau ou d'un groupe de formulaires.

<div formGroupName="formInfo"/>

<div formArrayName="formInfo"/>

1
Tom Benyon