没有将“exportAs"设置为“ngForm"的指令 [英] There is no directive with “exportAs” set to “ngForm”
问题描述
我已经包含了 FormsModule
但它显示了我的错误.
没有将exportAs"设置为ngForm"的指令
我的 Login.component.ts :-
import { Component } from '@angular/core';import { Http, Response , RequestOptions , Headers , URLSearchParams } from '@angular/http';从@angular/forms"导入{FormsModule};@成分({templateUrl: './login.component.html'})导出类 LoginComponent {apiRoot : String = "http://httpbin.org";//搜索代码从这里开始//数据 = 字符串;构造函数(私有http:Http){}提交(值){让 name = value.name;让密码 = value.password;让 url = `${this.apiRoot}/post`;this.http.post(url, {name:name,password:password}).subscribe(res => console.log(res.json()));console.log('提交');}}
我的 login.module.ts :-
import { BrowserModule } from '@angular/platform-browser';从'@angular/core' 导入 { NgModule };从'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid'导入{jqxGridComponent};import { AppComponent } from './../../app.component';从 '@angular/forms' 导入 { FormsModule, ReactiveFormsModule , FormGroup};从'@angular/http'导入{HttpModule};import { LoginComponent } from './login.component';@NgModule({声明: [AppComponent、jqxGridComponent、LoginComponent],进口:[浏览器模块,表单模块,Http模块,响应式表单模块],提供者:[],引导程序:[AppComponent]})导出类 LoginModule { }
我的 login.component.html
<form (ngSubmit)="onSubmit(heroForm.value)" #heroForm="ngForm"><input type="text" name="name" [(ngModel)]="name"/><input type="password" name="password" [(ngModel)]="password"/><br/><input type="checkbox" name="vehicle" value="Bike" [(ngModel)]="vehicle">我有一辆自行车
<input type="checkbox" name="vehicle" value="Car" >我有一辆车<br><button type="submit">发送</button></表单>
我尝试制作新的 angular 项目,它适用于主要的 app.module.ts、app.component.ts 和 app.component.html 文件,但是当我尝试使用登录文件时,它不起作用.
我是 Angular-5 的新手,所以在我们创建新的登录模块时我可能遗漏了一些东西.
-
应用组件:-
app.component.ts从@angular/core"导入 { Component, OnInit };从@angular/router"导入{路由器,导航结束};@成分({//tslint:disable-next-line选择器:'身体',模板:'<路由器插座></路由器插座>'})导出类 AppComponent 实现 OnInit {构造函数(私有路由器:路由器){}ngOnInit() {this.router.events.subscribe((evt) => {if (!(evt instanceof NavigationEnd)) {返回;}window.scrollTo(0, 0)});}}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';从@angular/platform-browser/animations"导入 { BrowserAnimationsModule };从'@angular/core' 导入 { NgModule };从@angular/common"导入 { LocationStrategy, HashLocationStrategy };从@angular/forms"导入 { FormsModule, ReactiveFormsModule };从'@angular/http'导入{HttpModule};从 './app.component' 导入 { AppComponent };//导入容器进口 {完整布局组件,简单布局组件} 来自'./容器';const APP_CONTAINERS = [完整布局组件,简单布局组件]//导入组件进口 {AppAside 组件,应用面包屑组件,应用页脚组件,应用头组件,应用侧边栏组件,AppSidebarFooterComponent,AppSidebarFormComponent,AppSidebarHeaderComponent,AppSidebarMinimizerComponent,APP_SIDEBAR_NAV来自'./components';const APP_COMPONENTS = [AppAside 组件,应用面包屑组件,应用页脚组件,应用头组件,应用侧边栏组件,AppSidebarFooterComponent,AppSidebarFormComponent,AppSidebarHeaderComponent,AppSidebarMinimizer 组件,APP_SIDEBAR_NAV]//导入指令进口 {AsideToggleDirective,NAV_DROPDOWN_DIRECIVES,替换指令,SIDEBAR_TOGGLE_DIRECTIVES} 来自'./指令';const APP_DIRECTIVES = [AsideToggleDirective,NAV_DROPDOWN_DIRECIVES,替换指令,SIDEBAR_TOGGLE_DIRECTIVES]//导入路由模块import { AppRoutingModule } from './app.routing';//导入第 3 方组件从 'ng2-charts/ng2-charts' 导入 { ChartsModule };从'ngx-bootstrap/dropdown'导入{BsDropdownModule};从 'ngx-bootstrap' 导入 { ModalModule };从'ngx-bootstrap/tabs'导入{TabsModule};@NgModule({进口:[浏览器模块,浏览器动画模块,应用路由模块,图表模块,Http模块,表单模块,反应形式模块,BsDropdownModule.forRoot(),ModalModule.forRoot(),TabsModule.forRoot(),],声明: [应用组件,...APP_CONTAINERS,...APP_COMPONENTS,...APP_指令],提供者:[{提供:位置策略,useClass: HashLocationStrategy}],引导程序:[ AppComponent ]})导出类 AppModule { }
我创建的登录页面位于查看文件夹下.来自 app
的路径.
views/pages/login.component.html视图/页面/login.component.ts视图/页面/login.module.ts
这是 node_module 的错误.
我刚刚更新了节点包,它正在运行.因为 @angular/core
没有正确导入.
因此,为此我在 sublime-3 中安装了 typescript 包,安装后显示错误,
import { NgModule } from '@angular/core';从 '@angular/forms' 导入 { FormsModule, ReactiveFormsModule , FormGroup};
因此,在获取节点文件时出现了一些问题.
I have included FormsModule
but it showing me error.
There is no directive with "exportAs" set to "ngForm"
My Login.component.ts :-
import { Component } from '@angular/core';
import { Http, Response , RequestOptions , Headers , URLSearchParams } from '@angular/http';
import {FormsModule} from '@angular/forms';
@Component({
templateUrl: './login.component.html'
})
export class LoginComponent {
apiRoot : String = "http://httpbin.org";
// search code starts here
// data = string;
constructor(private http: Http){
}
onSubmit(value){
let name = value.name;
let password = value.password;
let url = `${this.apiRoot}/post`;
this.http.post(url, {name:name,password:password}).subscribe(res => console.log(res.json()));
console.log('submit');
}
}
My login.module.ts :-
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';
import { AppComponent } from './../../app.component';
import { FormsModule, ReactiveFormsModule , FormGroup} from '@angular/forms';
import { HttpModule } from '@angular/http';
import { LoginComponent } from './login.component';
@NgModule({
declarations: [
AppComponent, jqxGridComponent, LoginComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class LoginModule { }
my login.component.html
<div class="">
<form (ngSubmit)="onSubmit(heroForm.value)" #heroForm="ngForm">
<input type="text" name="name" [(ngModel)]="name" />
<input type="password" name="password" [(ngModel)]="password" />
<br/>
<input type="checkbox" name="vehicle" value="Bike" [(ngModel)]="vehicle"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" > I have a car<br>
<button type="submit">Send</button>
</form>
</div>
I tried with making new angular project and it works with main app.module.ts, app.component.ts and app.component.html files but when I tried with login files it didn't works.
I'm new to Angular-5 so may be I'm missing something when we are creating new login modules.
Edit :-
App components :-
app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
// tslint:disable-next-line
selector: 'body',
template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
window.scrollTo(0, 0)
});
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
// Import containers
import {
FullLayoutComponent,
SimpleLayoutComponent
} from './containers';
const APP_CONTAINERS = [
FullLayoutComponent,
SimpleLayoutComponent
]
// Import components
import {
AppAsideComponent,
AppBreadcrumbsComponent,
AppFooterComponent,
AppHeaderComponent,
AppSidebarComponent,
AppSidebarFooterComponent,
AppSidebarFormComponent,
AppSidebarHeaderComponent,
AppSidebarMinimizerComponent,
APP_SIDEBAR_NAV
} from './components';
const APP_COMPONENTS = [
AppAsideComponent,
AppBreadcrumbsComponent,
AppFooterComponent,
AppHeaderComponent,
AppSidebarComponent,
AppSidebarFooterComponent,
AppSidebarFormComponent,
AppSidebarHeaderComponent,
AppSidebarMinimizerComponent,
APP_SIDEBAR_NAV
]
// Import directives
import {
AsideToggleDirective,
NAV_DROPDOWN_DIRECTIVES,
ReplaceDirective,
SIDEBAR_TOGGLE_DIRECTIVES
} from './directives';
const APP_DIRECTIVES = [
AsideToggleDirective,
NAV_DROPDOWN_DIRECTIVES,
ReplaceDirective,
SIDEBAR_TOGGLE_DIRECTIVES
]
// Import routing module
import { AppRoutingModule } from './app.routing';
// Import 3rd party components
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap';
import { TabsModule } from 'ngx-bootstrap/tabs';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
ChartsModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
BsDropdownModule.forRoot(),
ModalModule.forRoot(),
TabsModule.forRoot(),
],
declarations: [
AppComponent,
...APP_CONTAINERS,
...APP_COMPONENTS,
...APP_DIRECTIVES
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [ AppComponent ]
})
export class AppModule { }
My Login Page is which I have created files is under view folder.
Path from app
.
views/pages/login.component.html views/pages/login.component.ts views/pages/login.module.ts
It was node_module's error.
I have just updated the node packages and it's working.
Because @angular/core
was not importing properly.
So, for that I have install typescript package in sublime-3 and after install it was showing error in,
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule , FormGroup} from '@angular/forms';
So, It was some problem while fetching node files.
这篇关于没有将“exportAs"设置为“ngForm"的指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!