This is a very common error which comes
to Angular developers and especially people who have
just started with Angular, they won't be able to figure out this error.
This error says
Can't bind to ngmodel since it isn't a known property of input
In this application we have reproduced that error.
When we click on this customer
it shows this screen
In this screen we can see the error
Copy this error
and try to understand this error in more
detail.
In the notepad will copy the error
First if we need to understand where the error is we should actually hunt for this error with the arrow key.
There is an error with the arrow key, here it says
there is error right in this ngModel directory.
These are syntaxes of Angular which is inside html.
This arrow key and this word Error says
the error is in the ngModel
and it doesn't understand that.
if this ngModel has to work
something from angular needs to be imported
so the ngModel directory can be understood.
This is the projecr out here
in this project this is the CustomerUI. The CustomerUI where we have clicked on this CustomerUI
we are trying to load this CustomerUI is nothing but it is loading CustomerUI
it is pointing out the error ngModel.
This Customer UI is connected with this customer component and it is connected to CustomerUI
This customer component is loaded by the CustomerModule
We need to load the appropriate Angular modules
so that
the directive
ngModel
can be understood.
In the CustomerModule we need to load the FormsModule
The FormsModule has all the magic to make that ngModel binding running.
ngModel's directive helps to do one-way binding and two-way binding.
In the Angular forms
we have something called as
the FormsModule
and this FormsModule has to be loaded.
One is we import FormsModule at the top
as well as we need to specify
the FormsModule
in the
decorator.
In the ngModule decorator
specify the FormsModule.
If we just import it
in the TypeScript
we will still find the same error.
We need to not only
import it
using TypeScript we also need to
specify in the imports out here.
Now if we try to click
we still see the errors
This error is not exactly the same thing.
This time the error location has changed
it says that
it does not understand this
formGroup
formGroup is for validation purpose, it is reactive forms
Again for this formGroup we need to import the appropriate module.
For formGroup to work we need to import
ReactiveFormsModule
and again put in this reports
after that
the error has gone.
When we get this kind of error it says that
the FormsModule has not been imported, will go one step ahead
when we get an error like this it indicates
for this directive the necessary modules have not been imported.
This error is not related only for ngModel
This error can also come from other directives
for which we have got loaded the appropriate module.
Hunt for the error sign
look for this arrow out here
see the next
thing in that directive
the that directive where this pointing towards is where the error is
and for that directive
load the module.