angular: ngForm: error NG8002: Can't bind to 'formControl' since it isn't a known property of 'input'.

 

>PROBLEM

After adding an implementation to bind using ngModel , for instance:

    <label for="example-ngModel">[(ngModel)]:</label>

    <input [(ngModel)]="currentItem.name" id="example-ngModel">

Running angular using ngModels, returns the error message:

error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'
Can't bind to 'formGroup' since it isn't a known property of 'form'

Error: src/app/crud/crud-employee/crud-employee-update/crud-employee-update.component.html:2:9 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

2   <form [formGroup]="updateForm" (ngSubmit)="saveToList(updateForm)">

For instance, implementing a simple example like this:

You get:

Another example:

>SOLUTION

@NgModule is a key concern in Angular.

This NG8002 error usually comes from the @NgModule misconfiguration (missing something).
For instance, a usual occurrence may happen with these scenarios:

1. A new module is created and not registered on app.module.ts.
or

2. A new component is created and not registered in its specific module.
or

3. The selector's module is not registered in the module.

The selector is that declared in the .ts file, for instance at:
@Component({
  selector: 'app-modal-list',

Referenced in the .html file comes like this:
<app-modal-list></app-modal-list>

There are a few things to be observed.

1. Requires modules setup.

Set the required modules in app.modules.ts. Example:

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

...

@NgModule({

  declarations: [
        //...
   ],

  imports: [
//...
    FormsModule,
    ReactiveFormsModule,
  ],

*** IMPORTANT NOTE:

If you are using a page under its specific module, declare in that module too.

Example:

app
+--forms-lab
+-- forms1
--- forms-lab.module.ts

Edit forms-lab.module.ts and declare both modules referred to above.

2. Make sure that you have not overwritten the angular modules: 

It is something easy to happen, for instance, if you create a module called forms, as it is:

ng g m forms

This command will generate a FormsModule that overrides the angular's module.
This conflict causes the same issue.

If it happened, delete, and recreate it with another name.

3. Check if all components are declared in its modules.ts file.

Using the example above, it would be something like this in the forms-lab.module.ts file:

import { Forms1Component } from './forms1/forms1.component';

...

@NgModule({

  declarations: [

    Forms1Component,

  ],

4. Check if there isn't naming conflict.

Sometimes, the way the components are named may cause the issue.

Check the following image:

@MORE: 

https://stackoverflow.com/questions/43220348/cant-bind-to-formcontrol-since-it-isnt-a-known-property-of-input-angular

angular: is not a known element  (import config of module/submodule: @NgModule)

>ENV

Angular CLI: 13.2.2

Node: 16.13.1

Package Manager: npm 8.5.4

OS: win32 x64