1

I like to create a form using Angular ReactiveFormsModule. I got this error message when building the app:

Can't bind to 'formGroup' since it isn't a known property of 'form'

I already googled this error message and found these solutions: Can't bind to 'formGroup' since it isn't a known property of 'form'

Can't bind to 'formGroup' since it isn't a known property of 'form' in Angular 8

Unfortunately I’m unable to fix my problem with this advices.

[EDIT]

I created a minimal project with my issue. Please can some one have a look into it?

https://github.com/Christoph1972/test-reactive-forms.git

I spent so many time to find the problem, obviously I’m unable to fix it......

[/EDIT]

What’s my problem? I’m afraid the solution will be quite simple, but I’m new in Angular.

Christoph1972
  • 786
  • 3
  • 10
  • 21
  • Last days I created a demo project to learn working with ReactiveForms. This project runs as expected. I compared all references step by step and used also the “Find in File” function from Visual Studio Code to find forgotten/hidden references to FormsModule and ReactiveFormsModule. In my opinion there is no difference between both projects. What could go wrong her? Does anyone have an idea to find the problem? I’m sure, a really really small change will be enough to fix this issue. :-\ – Christoph1972 Apr 27 '21 at 16:40
  • You have declared the form variable as myForm!: FormGroup; , but in other places it is just myForm. Is your declared variable name same as the one given in html? – Vna Apr 27 '21 at 16:50
  • Hi Vna, I use the "non-null assertion operator" for the declaration of myForm that mean myForm! : FormGroup. – Christoph1972 Apr 27 '21 at 17:57
  • I added a demo project on GitHub. – Christoph1972 Apr 28 '21 at 11:17
  • @Christoph1972 can u make a stackblitz [here](https://stackblitz.com/) – Kiran Mistry Apr 28 '21 at 11:48

1 Answers1

2

you forget include in your app.module the TestModModule

import {TestModModule} from './test-mod/test-mod.module'
...
imports: [
    ...
    TestModModule
  ],

BTW, you can use a *ngIfin your form to avoid initials errors

<form *ngIf="myForm" [formGroup]="myForm">
   ...
</form>
Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • Oh my dear, totally focused on the error message. I was only looking for cases related to ReactiveFormsModule. It was so painful, I spent much time to this issue. :-/ Why does the RouterOulet works with out using [formGroup]="myForm" in the HTML file? Many thanks a lot for the support! – Christoph1972 Apr 28 '21 at 13:39