Using forms in Ionic 5, Angular 9 throws Error: NodeInjector: NOT_FOUND [ControlContainer]

Question

I have this error (on Ionic 5, angular 9) on core.js:

ERROR Error: Uncaught (in promise): Error: NodeInjector: NOT_FOUND [ControlContainer]
Error: NodeInjector: NOT_FOUND [ControlContainer]
    at getOrCreateInjectable (core.js:5862)
    at Module.ɵɵdirectiveInject (core.js:21103)
    at NodeInjectorFactory.NgControlStatusGroup_Factory [as factory] (forms.js:1073)
    at getNodeInjectable (core.js:5993)
    at instantiateAllDirectives (core.js:12984)
    at createDirectivesInstances (core.js:12196)
    at ɵɵelementStart (core.js:21289)
    at HomePage_Template (template.html:14)
    at executeTemplate (core.js:12156)
    at renderView (core.js:11926)
    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:41632)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

This is my code:

home.page.html

<form [formGroup]="regDeviceForm" (ngSubmit)="testForm()">

    <ion-input type="text" placeholder="Code" formControlName="code"  required></ion-input>

    <ion-button expand="block" class="btnBlue" type="submit" [disabled]="!regDeviceForm.valid">Send Data</ion-button>
  
</form>

home.page.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
    
    public regDeviceForm : FormGroup;   

    constructor(private formBuilder: FormBuilder ) {
    
        this.regDeviceForm = this.formBuilder.group({ 
            code: ['']
        })
    }

    testForm(){
        console.log("TestForm");
    }
}

app.module.ts

I have add ReactiveFormsModule and FormsModule:

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 { ReactiveFormsModule, FormsModule  } from '@angular/forms';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
      BrowserModule, 
      IonicModule.forRoot(), 
      AppRoutingModule,
      ReactiveFormsModule,
      FormsModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

This configuration gives me the same error. Following some instructions on the forums then I add ReactiveFormsModule, FormsModule on imports in home.page.spec.ts:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { ReactiveFormsModule, FormsModule  } from '@angular/forms';


import { HomePage } from './home.page';

describe('HomePage', () => {
  let component: HomePage;
  let fixture: ComponentFixture<HomePage>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomePage ],
      imports: [IonicModule.forRoot(),
        ReactiveFormsModule, FormsModule
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

But the error remains.

Has anyone solved this problem? Thanks for your help.

Answer 1

Do you have a home page module? If so, please post code.

The spec is only a test page for unit tests when running ng test.. This will not help for running the app.

If you have a home page module this is where you need to import ReactiveForms and FormsModule. I suspect this to be the case since I do not see HomePage Component declared in your App Module.

It would also be useful if you post app-routing.module.ts. It will probably show that requests to home path are lazy loading home page module.