未捕获（承诺）：错误：未找到名称“ngForm”的导出

Question

我正在尝试使用 ngModel 进行数据绑定，但是，我收到一个错误 ngForm not found。我已经在 app.module.ts 中包含了 formsmodule，如下所示。当我删除#grantAccessForm="ngForm"时错误消失，但是当我这样做并在输入字段中输入数据并提交时，我的页面刷新并且刷新的页面在 url 中有参数，如下所示：“http://localhost:8100 /signup?name=a&userName=a&email=a@email.com&password=aa&confirm=aa"

我希望能够在不刷新页面的情况下在 onSubmit() 函数中执行某些操作，有人可以向我解释#grantAccessForm="ngForm"这意味着什么以及为什么我会收到此错误。

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 {}

注册页面.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="your@email.com"  [(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>

注册页面.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);
    
  }

}

Answer 1

我在组件中使用反应式表单时遇到这个问题。我在单元测试用例执行中发现了这个错误。

ReactiveFormsModule简单的解决方案是在该部分中添加imports。

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

这将解决您的问题。

Answer 2

我有同样的问题，所以你需要在 app.module.ts 添加你的 singUpComponent

Answer 3

我遇到了类似的问题，就我而言，我试图从 ModalController 打开该组件。

解决方案是在 app.module.ts 下导入，您需要添加 FormsModule & 您需要在声明数组中添加组件。

下面提到的 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 {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 {}

Answer 4

1. 这里你错过了 dataModel.name 的拼写 ngmodel。
2. 更改答案中给出的 ion-button html。

注册页面.component.html

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <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>
              **<!-- Here you miss spelled ngModel -->**
              <ion-input  name="name" type="text" placeholder="Name" [(ngModel)]="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="your@email.com"  [(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> 
            **<!-- Here change button html -->**
            <button ion-button  size="large" type="submit" expand="block" >Register</button>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>