angular - 在 Ionic 5 中使用表单,Angular 9 抛出错误:NodeInjector: NOT_FOUND [ControlContainer]
问题描述
我在 core.js 上有这个错误(在 Ionic 5,角度 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>
主页.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();
});
});
但错误仍然存在。
有没有人解决过这个问题?谢谢你的帮助。
解决方案
你有主页模块吗?如果是这样,请发布代码。
该规范只是运行 ng test 时单元测试的测试页面。这对运行应用程序没有帮助。
如果您有主页模块,则需要在此处导入 ReactiveForms 和 FormsModule。我怀疑是这种情况,因为我没有看到您的 App 模块中声明的 HomePage 组件。
如果您发布 app-routing.module.ts,它也会很有用。它可能会表明对主页路径的请求是延迟加载主页模块。
推荐阅读
- javascript - 从 React Client 获取 post api 到 express 服务器导致错误
- ruby-on-rails - 列出关联对象中的方法检索到的对象时避免 N+1 的最佳实践
- python - 文件下载期间的 Gunicorn 超时
- android - 生成的文件(Dagger、LiveData)出现在错误的分支上,如果我删除它们会重新生成
- python - 使用相对路径从另一个 py 脚本运行 py 脚本
- exception - OCaml:对大型程序使用 `try` 和 `with`
- promise - Observable 中的 Promise 不返回值
- google-chrome - 正确关闭后可能与 chrome 扩展内容脚本发生内存泄漏
- twilio - 如何在 Twilio 客户端中回答拨号提示?
- python - 获取所有已加载的 python 包和版本以及变量的列表