This solution is correct. Ensure that you include the FormsModule.

To do this, first navigate to your app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule  } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule ,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next, go to app.component.spec.ts:

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

Your ngModel isn't functioning properly because it hasn't been included in your NgModule yet.

To indicate to the NgModule that you have permission to utilize ngModel across your application, you need to add FormsModule to your app.module.ts file within the imports section as shown below:

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

@NgModule({

   imports: [ FormsModule ],       // ADD THIS LINE HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

Each of the solutions provided for the issue are accurate. However, when utilizing lazy loading, it is essential to import FormsModule in the child module that contains forms. Simply adding it to app.module.ts will not suffice.

While running tests on my Angular 6 App with Karma/Jasmine, I encountered an error. Despite already including FormsModule in my main module, the addition of a new component utilizing [(ngModel)] caused my tests to fail. To resolve this issue, I had to also import FormsModule within the TestBed TestingModule.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));

To implement in app.module.ts, include the following:

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

@NgModule({
    declarations: [AppComponent],
    imports: [FormsModule],
})

To incorporate the ngModel directive into your application, remember to include the FormsModule in your NgModule imports.

Please note: The FormsModule can be added to either the main AppModule or a feature module that is loaded lazily using lazy loading techniques.

imports: [
   ...,
   FormsModule,
   ...
]

If you're facing issues with two way binding, here are a few things to check:

Ensure that ngModel is used correctly in the HTML without depending on other attributes of the input element.

<input [(ngModel)]="inputText">

Double-check if FormsModule is properly imported in the modules file app.modules.ts.

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // If this component uses two-way binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // Other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Make sure the component where ngModel is being used for two way binding is declared in the module as mentioned in point #2 above.

These steps should help you enable two-way binding using ngModel, tested up to Angular 9.

Hours of troubleshooting led me to the resolution which can be found here

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    
@NgModule({
    imports: [
         FormsModule,
         ReactiveFormsModule      
    ]
})

After updating to Angular 7.x.x, I encountered the same issue within one of my modules.

If the problem is within your independent module, include these additional modules:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can now be random;
  ...
})

If the issue is in your app.module.ts, make sure to add these modules:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [FormsModule, BrowserModule], // the order can be random now
  ...
})

You can view a simple demo to see this in action.

After many unsuccessful attempts to fix the error, I finally discovered that the issue was caused by a simple spelling mistake in my code. Instead of using ngModel, I mistakenly typed ngModule. Once I corrected this error, everything worked perfectly.

https://i.sstatic.net/hm9CN.pngDespite trying all the suggestions mentioned earlier, the issue persisted.

However, I eventually identified the problem on the Angular site. Simply importing formModule in module.ts solved it. https://i.sstatic.net/Ylht1.png

Consider incorporating

ngModel within the module scope

The provided code remains unchanged

For my situation, I resolved the issue by including the necessary import, specifically the ReactiveFormsModule.

To enable two-way data binding for form inputs in Angular, make sure to import the FormsModule package into your Angular module. For more detailed instructions, refer to the official Angular 2 tutorial and documentation on forms.

In your app.module.ts file, include the following lines:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

My mistake was using ngmodel instead of ngModel :) Hopefully this clarification helps!

The correct format should be [(ngModel)] What I mistakenly used was [(ngmodel)]

Make sure to include the form module in your app.module.ts file.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule, HttpModule, FormsModule     //Don't forget to add the form module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

In your HTML:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

If you're working with Angular 7, make sure to import the "ReactiveFormsModule".

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

This import solved the problem I was facing, so it might be useful for you too.

Make sure to include the FormsModule module in your Angular component.ts file before using ngModel.

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

Here is an example of how to use ngModel in your HTML code:

<input type='text' [(ngModel)]="usertext" />

In the event that the issue persists even after importing the necessary formsmodule, it is advised to verify that your Input does not possess a "name" attribute matching that of another input on the page.

While lazily loading my application, I made a mistake by importing the RoutingModule instead of the ComponentModule in my app-routing.module.ts