使用 Ionic 5 中的表单，Angular 9 抛出错误:节点注入器:NOT_FOUND [控制容器]

Question

我在核心上有这个错误(在离子 5 上，角度 9 上.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)

这是我的代码：

首页.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>

首页

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

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

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

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

如果您发布app-routing.module.ts，这也很有用。它可能会显示对主路径的请求是延迟加载主页模块。