formGroup expects a FormGroup instance error in Angular2 form

Question

I am trying to create a basic form in Angular 2 on plunker but faced with the below error on Chrome Dev's Console:

VM8247:27 EXCEPTION: Error in ./App class App - inline template:1:12 caused by: formGroup expects a FormGroup instance. Please pass one in.

       Example:


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

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

Plus there are some other errors also which point to more or less the above error only. I came across other answers on SO related to this but most of them had typos in their code.

Please have a look at the plunker .

Suggested close reason: _This question was caused by a problem that can no longer be reproduced or a simple typographical error._ — halfer, Sep 25 '17 at 21:22

score 1 · Answer 1 · answered Feb 08 '17 at 08:41

1

You actually have a typo in your plunker...

Instead of

constructor(fb:FormBuilder){

You write

cosntructor(fb:FormBuilder){

That is why your form isn't getting initialized and remains undefined for Angular.

answered Feb 08 '17 at 08:41

smnbbrv

23,502
9
78
109

1

oooh man. Thanx for the slight fix. I don't know how I didn't see that, was more worried bout the errors. Angular should also give these type errors. – Aakash Thakur Feb 08 '17 at 08:44
well, on typescript / angular side it is valid. Nobody restricts you in having function with the name `cosntructor` :D – smnbbrv Feb 08 '17 at 08:46

score 0 · Answer 2 · edited Jan 31 '20 at 12:51

0

Initialize your FormGroup instance empty at the time of declaration :

myFormGroup : FormGroup = new FormGroup({})

edited Jan 31 '20 at 12:51

Benkerroum Mohamed

1,867
3
13
19

answered Jan 31 '20 at 10:49

Vishal Singhal

1

formGroup expects a FormGroup instance error in Angular2 form

2 Answers2