在 Ionic 中使用表单会抛出 Error: NodeInjector: NOT_FOUND [ControlContainer]

Question

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

\n\n

\n

core.js:6260 错误错误：未捕获（承诺中）：错误：NodeInjector:\n NOT_FOUND [ControlContainer] 错误：NodeInjector: NOT_FOUND\n [ControlContainer]\n 位于 getOrCreateInjectable (core.js:5894)\n 模块处。 \xc9\xb5\xc9\xb5directiveInject (core.js:21115)\n 在 NodeInjectorFactory.NgControlStatusGroup_Factory [作为工厂] (forms.js:1073)\n 在 getNodeInjectable (core.js:6025)\n 在 instantiateAllDirectives (core. js:12953)\n 在 createDirectivesInstances (core.js:12169)\n 在 \xc9\xb5\xc9\xb5elementStart (core.js:21298)\n 在 EditPage_Template (template.html:18)\n 在executeTemplate (core) .js：12129）\ n在renderView（core.js：11899）\ n在resolvePromise（zone-evergreen.js：798）\ n在resolvePromise（zone-evergreen.js：750）\ n在zone-evergreen.js :860\n 在 ZoneDelegate.invokeTask (zone-evergreen.js:399)\n 在 Object.onInvokeTask (core.js:41640)\n 在 ZoneDelegate.invokeTask (zone-evergreen.js:398)\n 在区域。 runTask (zone-evergreen.js:167)\n 在rainMicroTaskQueue (zone-evergreen.js:569)

\n

\n\n

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

\n\n

这对我不起作用，并且我不断收到错误。

\n\n

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

\n\n

Angular Error: NodeInjector: NOT_FOUND [ControlContainer] 中突然出现错误

\n\n

在 Angular 6 中使用 Angular Material Forms 时，没有提供 ControlContainer 错误的提供程序

\n\n

没有 ControlContainer 的提供者和 ControlContainer 没有提供者

\n\n

这是我的代码：

\n\n

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

\n\n

在我的组件中：

\n\n

import { Component } from \'@angular/core\';\nimport { FormGroup, FormBuilder, Validators } from \'@angular/forms\';\n\n@Component({\n  selector: \'app-edit\',\n  templateUrl: \'./edit.page.html\',\n  styleUrls: [\'./edit.page.scss\'],\n})\nexport class EditPage {\n  editId: number = 0;\n  todo : FormGroup;\n\n  constructor(private formBuilder: FormBuilder) {\n\n    this.todo = this.formBuilder.group({\n      title: [\'\', Validators.required],\n      description: [\'\'],\n    });\n  }\n}\n

\n\n

最后是我的应用程序模块：

\n\n

import { FormsModule, ReactiveFormsModule } from \'@angular/forms\';\nimport { NgModule } from \'@angular/core\';\nimport { BrowserModule } from \'@angular/platform-browser\';\nimport { RouteReuseStrategy } from \'@angular/router\';\n\nimport { IonicModule, IonicRouteStrategy } from \'@ionic/angular\';\nimport { SplashScreen } from \'@ionic-native/splash-screen/ngx\';\nimport { StatusBar } from \'@ionic-native/status-bar/ngx\';\n\nimport { AppComponent } from \'./app.component\';\nimport { AppRoutingModule } from \'./app-routing.module\';\nimport { HttpClientService } from \'./core/services/http-client.service\';\nimport { HttpClientModule } from \'@angular/common/http\';\nimport { CommonModule } from \'@angular/common\';\n\n@NgModule({\n  declarations: [AppComponent],\n  entryComponents: [],\n  imports:\n    [\n      FormsModule,\n      ReactiveFormsModule,\n      CommonModule,\n      BrowserModule,\n      HttpClientModule,\n      IonicModule.forRoot(), AppRoutingModule\n    ],\n  providers: [\n    StatusBar,\n    SplashScreen,\n    HttpClientService,\n    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n

\n

Answer 1

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

例如

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