[SOLVED] Angular 16 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'

Angular 16 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'

I have the above error message when I try to use two-way binding in a Angular application.

<form>
 <input type="email" class="form-control" id="email" name="email" required [(ngModel)]="email" />
</form>

The code is in the loginComponent which was created in this folder: src/app/login.

I've imported forms in the app.module.ts like this :

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
...
imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
...
providers: [],
  bootstrap: [AppComponent],
})

restarted the app, but the error is still there.

Please help me with this situation.

Thank you!

Solution

The html to which the component belongs to must be a standalone component. If that is the case, you need to separately add FormsModule to the imports array!

@Component({
  selector: '<<some-component>>',
  standalone: true,
  imports: [FormsModule],
  ...
})