在离子形式中使用表单引发错误：NodeInjector：NOT_FOUND [ControlContainer]

Question

我创建了带有表单的Ionic应用。没什么特别的（下面的代码）。在添加表单并使用表单组和其他东西之前，一切正常。当我开始添加表单组并连接所有东西时，出现此错误：

core.js：6260错误错误：未捕获（承诺）：错误：NodeInjector：NOT_FOUND [ControlContainer]错误：NodeInjector：NOT_FOUND[ControlContainer]在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）在executeTemplate（core.js：12129）在renderView（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）在排水管微任务队列（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 {
}

Answer 1

我在Ionic5 / Angular9上的formGroup遇到了完全相同的错误。我已经解决了您忘记在app.module上添加EditPage：

declarations: [AppComponent, EditPage ],
  entryComponents: [EditPage ],