DataBinding in Angular

Question

I am getting error No directive found with export as ngForm

My app.module.ts

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

My imports

 imports: [ReactiveFormsModule,CommonModule,FormsModule]

LoginComponent.html

  <div class="row w-100 mx-0">
    <div class="col-lg-4 mx-auto">
      <div class="auth-form-light text-left py-5 px-4 px-sm-5">
        <div class="brand-logo">
          <img src="assets/images/logo.png" alt="logo">
        </div>
       <form class="pt-3" #f="ngForm" (ngSubmit)="onSubmit(f)" >
          <div class="form-group">
            <input type="email" class="form-control form-control-lg" id="userId"  name="userId" placeholder="LogIn ID" ngModel>
          </div>
          <div class="form-group">
            <input type="password" class="form-control form-control-lg" id="userName"  name="userPassword" placeholder="Password" ngModel>
          </div>
          <div class="mt-3">
            <button type="submit" class="btn btn-gradient-light btn-rounded btn-fw btn-lg" routerLink="/dashboard">Log In</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div> 

LoginComponent.ts ngForm are imported but i am getting the error that import is required formsModule and NgForm are imported and i am getting the error at npm start

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

    arr: any[]=[];    
    onSubmit(form : NgForm) {
      this.arr = form.value
      console.log(JSON.stringify(this.arr))
     }

Answer 1

Try to import them in the order like BrowserModule, FormsModule and ReactiveFormsModule. Angular compiler will take them in the order what we have mentioned in Imports array of our Module class (Correct me if I am wrong).

So importing order should be from Basic to Feature modules.

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule     
  ],
  providers: [],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

You can also see here in this answer which is for similar kind of question

• https://stackoverflow.com/a/57849112/9764133

Answer 2

Make sure that you import BrowserModule in app.module.ts like that

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

and add it to imports like that :-

imports: [
BrowserModule, <<<<<<<<<< 
FormsModule,
],

that is worked for me