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

Question

我在 core.js 上遇到此错误（在 Ionic 5，angular 9 上）：

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)

这是我的代码：

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

这个配置给我同样的错误。按照论坛上的一些说明，然后我在 home.page.spec.ts:

的导入中添加 ReactiveFormsModule、FormsModule

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();
  });
});

但错误依旧。

有人解决过这个问题吗？感谢您的帮助。

Answer 1

你们有主页模块吗？如果是这样，请post代码。

当运行 ng 测试时，该规范只是单元测试的测试页面。这对运行应用程序没有帮助。

如果您有主页模块，您需要在此处导入 ReactiveForms 和 FormsModule。我怀疑是这种情况，因为我没有看到您的应用程序模块中声明的主页组件。

如果你 post app-routing.module.ts 也会很有用。大概会显示请求home路径是懒加载主页模块。

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

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

angular

forms

ionic-framework

angular9

ionic5