Uncaught (in promise): Error: Export of name 'ngForm' not found

Question

I am trying to use ngModel to do data binding, however, I get an error ngForm not found. I have already included formsmodule in app.module.ts as you can see below. The error disappears when i remove #grantAccessForm= "ngForm" but when i do this and input data in input field and submit, my page refreshes and the refreshed page has params in the url, like this: "http://localhost:8100/signup?name=a&userName=a&[email protected]&password=aa&confirm=aa"

I want to be able to do something in the onSubmit() function without the page being refreshed, can someone explain to me what #grantAccessForm= "ngForm" this means and why am i getting this error.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { LoginPageComponent } from './login/login-page/login-page.component';
import { SignUpPageComponent } from './login/sign-up-page/sign-up-page.component';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    component: LoginPageComponent
  },
  {
    path: 'login',
    component: LoginPageComponent,

    //()=> import('./login/login-page/login-page.component').then(m=> m.LoginPageComponent)
  },
  {
    path: 'signup',
    component: SignUpPageComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    FormsModule,
    IonicModule.forRoot(), 
    AppRoutingModule, 
    ReactiveFormsModule
  ],
  exports:[],

  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

sign-up-page.component.html

</ion-content>
  <form #grantAccessForm= "ngForm" (ngSubmit)="onSubmit(grantAccessForm)">
    <ion-grid>
      <ion-row justify-content-center>
        <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
          <div  class="centerText">
            <h3>Create your account!</h3>
          </div>
          <div padding>

            <ion-item>
              <ion-input  name="name" type="text" placeholder="Name" [(ngMode)]="dataModel.name"></ion-input>
            </ion-item>

            <ion-item>
              <ion-input  name="userName" type="text" placeholder="Username"  [(ngModel)]="dataModel.username"></ion-input>
            </ion-item>

            <ion-item>
              <ion-input name="email" type="email" placeholder="[email protected]"  [(ngModel)]="dataModel.email"></ion-input>
            </ion-item>

            <ion-item>
              <ion-input name="password" type="password" placeholder="Password"  [(ngModel)]="dataModel.password"></ion-input>
            </ion-item>

            <ion-item>
              <ion-input name="confirm" type="password" placeholder="Password again"  [(ngModel)]="dataModel.passwordAgain"></ion-input>
            </ion-item>
          </div>
          <div padding>
            <ion-button  size="large" type="submit" expand="block" >Register</ion-button>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>

sign-up-page.component.ts

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

@Component({
  selector: 'app-sign-up-page',
  templateUrl: './sign-up-page.component.html',
  styleUrls: ['./sign-up-page.component.scss'],
})
export class SignUpPageComponent implements OnInit { 

// Import ViewChild
@ViewChild('grantAccessForm', {static: false}) grantAccessForm: NgForm;
dataModel: any = {}; // Your data model


  constructor() { }

  ngOnInit() {}

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

}

Solution 1

i had the same issue so you need to add you singUpComponent in the app.module.ts

Solution 2

I faced the similar issue, in my case I was trying to open that component from a ModalController.

The solution is in app.module.ts under imports you need to add FormsModule & you need to add the component in declarations array.

The below mentioned app.module.ts should work

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import {SignUpPageComponent} from './sign-up-page.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent,SignUpPageComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    FormsModule,
    IonicModule.forRoot(), 
    AppRoutingModule, 
    ReactiveFormsModule
  ],
  exports:[],

  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Solution 3

I am facing this issue while using Reactive Forms in the component. I found this error in unit test case execution.

Simple solution is add ReactiveFormsModule in the imports section.

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [ YourComponent ],
    imports: [AppRoutingModule,ReactiveFormsModule],
    providers: [ AuthService],
  })
  .compileComponents();
});

This will solve your issue.

Solution 4

Add FormsModule in app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

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

Solution 5

Same Issue I have faced for below step it's work for me

• import FormsModule for app module and working current module from both places'
• import ngForm in you ts file then do the below steps

1. terminate console
2. run npm install
3. run server again

View more solutions

Comments

[Addis]

This also happens when you apply the directive to an input or another form control. If input, try ngModel instead.

[Santosh Shinde]

Here is working demo stackblitz.com/edit/ionic-exbybt

[Tyler2P]

Can you provide more information on what your code does? Also providing information such as what the differences are between the two blocks of code will result in a better quality answer.

[Oscar Cabrera Rodríguez]

In my case I needed FormsModule, but your answer hinted me in the right direction

[mchar]

More info here: NG0301

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.