Использование форм в Ioni c вызывает ошибку: NodeInjector: NOT_FOUND [ControlContainer]

Question

Я создал приложение Ioni c с формой. Ничего особенного (код ниже). До того, как я добавил форму и использовал группу форм, все работало нормально. Когда я начал добавлять группу форм и все, что подключено, я получаю эту ошибку:

core. js: 6260 ERROR Ошибка: Uncaught (в обещании): Ошибка: NodeInjector: NOT_FOUND [ControlContainer] Ошибка: NodeInjector: NOT_FOUND [ControlContainer] в getOrCreateInjectable (core. js: 5894) в Module.ɵɵdirectiveInject (core. js: 21115) в NodeInjectorFactory.NgControlStatusGroup_Factory [as factory] (формы. js: 1073) getNodeInjectable (core. js: 6025) в instantiateAllDirectives (core. js: 12953) в createDirectivesInstances (core. js: 12169) в ɵɵelementStart (core. js: 21298) в EditPage_Template (template. * 1042) *: 18) в executeTemplate (core. js: 12129) в renderView (core. js: 11899) в resolvePromise (zone-evergreen. js: 798) в resolvePromise (zone-evergreen. js: 750) в зоне-evergreen. js: 860 в ZoneDelegate.invokeTask (зона-evergreen. js: 399) в Object.onInvokeTask (core. js: 41640) в ZoneDelegate.invokeTask (зона-evergreen. js: 398) в зоне .runTask (zone-evergreen. js: 167) at DrainMicroTaskQueue (zone-evergreen. js: 569)

Я попробовал то, что нашел в Интернете: импортировать как модуль форм, так и модуль ReactiveFormsModule из @ angular / forms в файле app.module.ts

У меня это не работает, и я продолжаю получать сообщение об ошибке.

Ссылки, которые я нашел на SO и попробовал, но не нашел ' t работа:

Внезапное получение ошибки в Angular Ошибка: NodeInjector: NOT_FOUND [ControlContainer]

Нет поставщика для ControlContainer Ошибка при использовании Angular Материал Формы с Angular 6

Без поставщика для ControlContainer и без поставщика для 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

Вам необходимо импортировать 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 {}

Answer 2

Переместите импорт:

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

, а импорт NgModule:

FormsModule,
ReactiveFormsModule,

из app.module.ts в edit.module.ts.

Answer 3

Если вы используете модальный

, то импортируйте это

import {FormGroup, FormControl} из '@ angular / forms'; // импортирует

в родительский модуль модального

Answer 4

У меня точно такая же ошибка с formGroup на Ionic5 / Angular9. Я решил это. Вы забыли добавить EditPage в app.module: declarations: [AppComponent, EditPage ], entryComponents: [EditPage ],