在 Ionic 中使用表单会引发错误：NodeInjector: NOT_FOUND [ControlContainer]答案

【问题标题】：Using forms in Ionic throws Error: NodeInjector: NOT_FOUND [ControlContainer]在 Ionic 中使用表单会引发错误：NodeInjector: NOT_FOUND [ControlContainer]
【发布时间】：2020-09-14 05:14:42
【问题描述】：

我创建了一个带有表单的 Ionic 应用程序。没什么特别的（代码如下）。在我添加表单并使用表单组和其他东西之前，它工作得很好。当我开始添加表单组和所有连接的东西时，我得到了这个错误：

core.js:6260 ERROR 错误：未捕获（承诺中）：错误：NodeInjector： NOT_FOUND [ControlContainer] 错误：NodeInjector：NOT_FOUND [控制容器] 在 getOrCreateInjectable (core.js:5894) 在 Module.ɵɵdirectiveInject (core.js:21115) 在 NodeInjectorFactory.NgControlStatusGroup_Factory [作为工厂] (forms.js:1073) 在 getNodeInjectable (core.js:6025) 在 instantiateAllDirectives (core.js:12953) 在 createDirectivesInstances (core.js:12169) 在 ɵɵelementStart (core.js:21298) 在 EditPage_Template (template.html:18) 在执行模板 (core.js:12129) 在渲染视图（core.js:11899）在 resolvePromise (zone-evergreen.js:798) 在 resolvePromise (zone-evergreen.js:750) 在 zone-evergreen.js:860 在 ZoneDelegate.invokeTask (zone-evergreen.js:399) 在 Object.onInvokeTask (core.js:41640) 在 ZoneDelegate.invokeTask (zone-evergreen.js:398) 在 Zone.runTask (zone-evergreen.js:167) 在 drainMicroTaskQueue (zone-evergreen.js:569)

我尝试了我在网上找到的东西：从文件 app.module.ts 中的 @angular/forms 导入 Forms Module 和 ReactiveFormsModule

这对我不起作用，我不断收到错误消息。

我在 SO 上找到并尝试过的链接，但没有用：

Getting error suddenly in Angular Error: NodeInjector: NOT_FOUND [ControlContainer]

No provider for ControlContainer Error while using Angular Material Forms with Angular 6

No provider for ControlContainer and No provider for ControlContainer

这是我的代码：

<ion-content>
  <form [formGroup]="todo" (ngSubmit)="save()">
    <ion-row>
      <ion-col>
        <ion-list inset>
          <ion-item>
            <ion-input placeholder="Title" formControlName="title" id="title" type="text"></ion-input>
          </ion-item>
          <ion-item>
            <ion-input placeholder="Description" formControlName="description" id="description" type="text"></ion-input>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </form>
</ion-content>

在我的组件中：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.page.html',
  styleUrls: ['./edit.page.scss'],
})
export class EditPage {
  editId: number = 0;
  todo : FormGroup;

  constructor(private formBuilder: FormBuilder) {

    this.todo = this.formBuilder.group({
      title: ['', Validators.required],
      description: [''],
    });
  }
}

最后是我的 app.module：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
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 { HttpClientService } from './core/services/http-client.service';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports:
    [
      FormsModule,
      ReactiveFormsModule,
      CommonModule,
      BrowserModule,
      HttpClientModule,
      IonicModule.forRoot(), AppRoutingModule
    ],
  providers: [
    StatusBar,
    SplashScreen,
    HttpClientService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

【问题讨论】：

为什么要导入 FormsModule 2x？ import { FormsModule as ngFormsModule, FormsModule , ...
你知道，我不知道。我从一个工作示例中得到了这段代码。我删除了它；不过没有解决问题。

标签： angular ionic-framework

【解决方案1】：

您必须在页面的module.ts 文件中导入ReactiveFormsModule。

例如

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { ProfilePage } from './profile.page';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{path: '', component: ProfilePage}]),
    ReactiveFormsModule
  ],
  declarations: [ProfilePage]
})
export class ProfilePageModule {}

【讨论】：

【解决方案2】：

如果您使用的是模态

然后导入这个

从 '@angular/forms' 导入 { FormGroup, FormControl }； //导入

到模态的父模块

【讨论】：

对于那些使用模态显示表单的人来说，这是正确的答案。谢谢。

【解决方案3】：

移动导入：

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

以及 NgModule 导入：

FormsModule,
ReactiveFormsModule,

从app.module.ts 到edit.module.ts。

【讨论】：

【解决方案4】：

我在 Ionic5/Angular9 上使用 formGroup 时遇到了完全相同的错误。我已经解决了这个问题。您忘记在 app.module 上添加 EditPage： declarations: [AppComponent, EditPage ], entryComponents: [EditPage ],

【讨论】：