在Ionic中使用表单引发错误:NodeInjector:NOT_FOUND [ControlContainer] [英] Using forms in Ionic throws Error: NodeInjector: NOT_FOUND [ControlContainer]
问题描述
我用表格创建了一个Ionic应用程序.没什么特别的(下面的代码).在添加表单并使用表单组和其他东西之前,它工作正常.当我开始添加表单组并连接所有东西时,出现此错误:
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:
core.js:6260错误错误:未捕获(承诺):错误:NodeInjector: NOT_FOUND [ControlContainer]错误:NodeInjector:NOT_FOUND [ControlContainer] 在getOrCreateInjectable(core.js:5894) 在Module.ɵɵdirectiveInject(core.js:21115) 在NodeInjectorFactory.NgControlStatusGroup_Factory [作为工厂](forms.js:1073) 在getNodeInjectable(core.js:6025) 在InstantiateAllDirectives(core.js:12953) 在createDirectivesInstances(core.js:12169) 在ɵɵelementStart(core.js:21298) 在EditPage_Template(template.html:18) 在executeTemplate(core.js:12129) 在renderView(core.js:11899) 在resolvePromise(zone-evergreen.js:798) 在resolvePromise(zone-evergreen.js:750) 在zone-evergreen.js:860 在ZoneDelegate.invokeTask(zone-evergreen.js:399) 在Object.onInvokeTask(core.js:41640) 在ZoneDelegate.invokeTask(zone-evergreen.js:398) 在Zone.runTask(zone-evergreen.js:167) 在rainMicroTaskQueue(zone-evergreen.js:569)处
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)
我尝试了在网上找到的东西: 从app.module.ts文件中的@ angular/forms导入Forms Module和ReactiveFormsModule
I tried the thing that I found online: Import both Forms Module and ReactiveFormsModule from @angular/forms in the file app.module.ts
这对我不起作用,而且我不断收到错误消息.
This doesn't work for me and I keep getting the error.
我在SO上找到并尝试过的链接,但没有用:
Links I found on SO and tried, but didn't work:
在Angular错误中突然出现错误:NodeInjector: NOT_FOUND [ControlContainer]
没有提供ControlContainer错误的提供程序在将Angular Material Forms与Angular 6一起使用时
没有ControlContainer的提供者,也没有ControlContainer的提供者
这是我的代码:
<ion-content>
<form [formGroup]="todo" (ngSubmit)="save()">
<ion-row>
<ion-col>
<ion-list inset>
<ion-item>
<ion-input placeholder="Title" formControlName="title" id="title" type="text"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Description" formControlName="description" id="description" type="text"></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</form>
</ion-content>
在我的组件中:
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: [''],
});
}
}
最后是我的app.module:
And finally my app.module:
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 {
}
推荐答案
如果您使用的是Modal
If you are using Modal
然后导入此
从'@ angular/forms'导入{FormGroup,FormControl}; //导入
import { FormGroup, FormControl } from '@angular/forms'; //imports
到模式的父模块
这篇关于在Ionic中使用表单引发错误:NodeInjector:NOT_FOUND [ControlContainer]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!