Using forms in Ionic throws Error: NodeInjector: NOT_FOUND [ControlContainer]

Question

I have created an Ionic app with a form. Nothing special (code is below). Before I added a form and used the formgroup and stuff it worked all fine. When I started to add the form group and all things connected I get this error:

core.js:6260 ERROR Error: Uncaught (in promise): Error: NodeInjector: NOT_FOUND [ControlContainer] Error: NodeInjector: NOT_FOUND [ControlContainer] at getOrCreateInjectable (core.js:5894) at Module.ɵɵdirectiveInject (core.js:21115) at NodeInjectorFactory.NgControlStatusGroup_Factory [as factory] (forms.js:1073) at getNodeInjectable (core.js:6025) at instantiateAllDirectives (core.js:12953) at createDirectivesInstances (core.js:12169) at ɵɵelementStart (core.js:21298) at EditPage_Template (template.html:18) at executeTemplate (core.js:12129) at renderView (core.js:11899) at resolvePromise (zone-evergreen.js:798) at resolvePromise (zone-evergreen.js:750) at zone-evergreen.js:860 at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41640) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at drainMicroTaskQueue (zone-evergreen.js:569)

I tried the thing that I found online: Import both Forms Module and ReactiveFormsModule from @angular/forms in the file app.module.ts

This doesn't work for me and I keep getting the error.

Links I found on SO and tried, but didn't work:

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

Here is my code:

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

In my component:

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: [''],
    });
  }
}

And finally my 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

You have to import ReactiveFormsModule in the page's module.ts file.

For example

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

If you are using Modal

Then Import this

import { FormGroup, FormControl } from '@angular/forms'; //imports

to the parent module of the modal

Answer 3

Move the import:

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

and the NgModule imports:

FormsModule,
ReactiveFormsModule,

from app.module.ts into edit.module.ts.

Answer 4

I've got exactly the same error with formGroup on Ionic5/Angular9. I've solved this. You forget to add EditPage on app.module: declarations: [AppComponent, EditPage ], entryComponents: [EditPage ],