title: Using forms in Ionic throws Error: NodeInjector: NOT_FOUND [ControlContainer]
body: <p>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:</p>
  
  <blockquote>
    <p>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)</p>
  </blockquote>
  
  <p>I tried the thing that I found online:
  Import both Forms Module and ReactiveFormsModule from @angular/forms in the file app.module.ts</p>
  
  <p>This doesn't work for me and I keep getting the error.</p>
  
  <p>Links I found on SO and tried, but didn't work:</p>
  
  <p><a href="https://stackoverflow.com/questions/60462708/getting-error-suddenly-in-angular-error-nodeinjector-not-found-controlcontain">Getting error suddenly in Angular Error: NodeInjector: NOT_FOUND [ControlContainer]</a></p>
  
  <p><a href="https://stackoverflow.com/questions/52623498/no-provider-for-controlcontainer-error-while-using-angular-material-forms-with-a">No provider for ControlContainer Error while using Angular Material Forms with Angular 6</a></p>
  
  <p><a href="https://stackoverflow.com/questions/42939814/no-provider-for-controlcontainer-and-no-provider-for-controlcontainer">No provider for ControlContainer and No provider for ControlContainer</a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;ion-content&gt;
    &lt;form [formGroup]="todo" (ngSubmit)="save()"&gt;
      &lt;ion-row&gt;
        &lt;ion-col&gt;
          &lt;ion-list inset&gt;
            &lt;ion-item&gt;
              &lt;ion-input placeholder="Title" formControlName="title" id="title" type="text"&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
              &lt;ion-input placeholder="Description" formControlName="description" id="description" type="text"&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
          &lt;/ion-list&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
    &lt;/form&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>In my component:</p>
  
  <pre><code>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: [''],
      });
    }
  }
  </code></pre>
  
  <p>And finally my app.module:</p>
  
  <pre><code>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 {
  }
  </code></pre>