-2

Something weird is happening in Angular. I started with a component that works fine using a FormGroup, but now I added a second component that also uses FormGroup in the exact same fashion (literally copy-pasted it) and it's giving me the error: Can't bind to 'formGroup' since it isn't a known property of 'form' for second component

For the first component, this is what I did.

In the app.module.ts file I imported

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

and added them to:

imports: [
    ReactiveFormsModule,
    FormsModule,
    BrowserModule,
    RutasModule,
    HttpClientModule
  ]

Then I created a component that imports:

import { FormControl, FormGroup, Validators } from "@angular/forms";

then declared a component variable myForm:FormGroup and used it in the template as

<form [formGroup]="myForm"> 
   ... 
</form>

It works fine, but now I added a second component that literally copies the import and form tag from the first one. Why am I getting this error with the second component? The app.module.ts file does import the required modules and they work fine with the first component, but the second component doesn't

MaoMonroy
  • 117
  • 2
  • 12
  • 3
    Does this answer your question? [Can't bind to 'formGroup' since it isn't a known property of 'form'](https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form) – mario-neb Jan 21 '22 at 16:53
  • Can you put more of the code from your component where you import formGroup? – Mathew Berg Jan 21 '22 at 17:00

1 Answers1

1

Ensure your second component is imported into the App module, if it is imported in another module you need to add FormsModule, ReactiveFormsModule in that component.

Ensure you have created myForm variable in secondComponent.ts.

myForm = new FormGroup({
     name: new FormControl(),
     age: new FormControl('20')
}); 
Jai Saravanan
  • 413
  • 4
  • 12