没有将"exportAs"设置为"ngForm"的指令 [英] There is no directive with “exportAs” set to “ngForm”
问题描述
我已经包含了 FormsModule ，但它向我显示了错误.
I have included FormsModule but it showing me error.
There is no directive with "exportAs" set to "ngForm"
我的Login.component.ts:-
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');
}
}
我的login.module.ts:-
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 { }
我的login.component.html
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>
我尝试制作新的有角度的项目，并且它可以与主要的app.module.ts，app.component.ts和app.component.html文件一起使用，但是当我尝试使用登录文件时，它不起作用.
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.
我是Angular-5的新手，所以在创建新的登录模块时可能会丢失一些东西.
I'm new to Angular-5 so may be I'm missing something when we are creating new login modules.
-
应用程序组件:-
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
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 { }
我已创建文件的登录页面位于view文件夹下.来自 app 的路径.
My Login Page is which I have created files is under view folder.
Path from app.
views/pages/login.component.html视图/页面/login.component.tsviews/pages/login.module.ts
views/pages/login.component.html views/pages/login.component.ts views/pages/login.module.ts
推荐答案
这是node_module的错误.
It was node_module's error.
我刚刚更新了节点包，它正在工作.因为 @ angular/core 无法正确导入.
I have just updated the node packages and it's working.
Because @angular/core was not importing properly.
因此，为此，我在sublime-3中安装了typescript软件包，安装后它显示错误，
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屋！
