Template driven form not working.. "Error: Export of name 'ngForm' not found"

Question

I have added the FormsModule in the component module and also tried by adding it to the app module but the same error is repeating 4 times in the console. Please help me fix this issue.

grant-access.component.html

<form #grantAccessForm="ngForm" (ngSubmit)="onSubmit(grantAccessForm)">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <input
                  type="text"
                  class="form-control form-control-alternative"
                  ngModel
                  name="clientName"
                  placeholder="Client Name"
                />
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <input
                  type="text"
                  placeholder="IMD Code"
                  class="form-control form-control-alternative"
                  ngModel
                  name="imdCode"
                />
              </div>
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-3 col-md-2">
              <button class="btn btn-primary">Submit</button>
            </div>
          </div>
        </form>

grant-access.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-grant-access',
  templateUrl: './grant-access.component.html',
  styleUrls: ['./grant-access.component.scss']
})
export class GrantAccessComponent implements OnInit {
  constructor() {}

  ngOnInit() { 
  }
  onSubmit(form){
    console.log(form)
  }
}

Thanks in advance

Answer 1

You need a two-way data binding for template driven forms. Use [(ngModel)]="dataModel.clientName" where data model is your object model.

<form #grantAccessForm="ngForm" (ngSubmit)="onSubmit(grantAccessForm)">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <input
                  type="text"
                  class="form-control form-control-alternative"
                  [(ngModel)]="dataModel.clientName"
                  name="clientName"
                  placeholder="Client Name"
                />
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <input
                  type="text"
                  placeholder="IMD Code"
                  class="form-control form-control-alternative"
                  [(ngModel)]="dataModel.imdCode"
                  name="imdCode"
                />
              </div>
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-3 col-md-2">
              <button class="btn btn-primary">Submit</button>
            </div>
          </div>
        </form>

And in your component.ts

export class GrantAccessComponent implements OnInit {
  // Import ViewChild
  @ViewChild('grantAccessForm', {static: false}) grantAccessForm: NgForm;

  dataModel: any = {}; // Your data model

  constructor() {}

  ngOnInit() { 
  }
  onSubmit(form){
    console.log(form)
  }
}

Answer 2

After checking all the more mainstream reasons for getting this error (eg making sure I was importing the FormsModule, as described in other answers), I found that, in my case, the problem was due to an extra trailing comma at the end of the previous declarations section (after AppComponent in this example), in the @NgModule directive. ie:

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

In this case I saw no errors, either on the command line, nor in the developer console within the browser, but I got this error instead, until I fixed this.

The reason I ended up with this is because some languages are rather more tolerant of superfluous commas like this than others (and I am relatively new to JavaScript/Typescript/Angular) :-)

Answer 3

You need to import both FormsModule and ReactiveFormsModule in your module.

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

Answer 4

I get the same error while using jasmine for testing. I had to import the module FormsModule to spec.ts. Hope this helps someone else experiencing this error.

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

});