前言
小编在学习angular视频的时候,遇到了一个问题,这个问题出现后,小编认为是Angular升级引起的一些变化,结果做过一些其他指令的尝试,都没有成功。
There is no directive with "exportAs" set
to "ngForm" ("<form [ERROR ->]#myForm="ngForm">
重新思考
通过这个日志内容的分析,得出认识,可能是没有引入这个相关指令的引用,回想起视频中app.modules.ts中,似乎有关于FormsModule中的引用,自己的项目中没有添加引用,是由于不知道这个引用出自哪一个包,便没有引用。
解决问题
照着这个思路,自己重新翻看了视频,发现了这个引用添加的包:@angular/forms,结果问题解决了。
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
TemplateFormComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
例子实现
图中的示例,使用ngForm指令,可以获取form表单中的 带有ngModel指令的formControl的数据。
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
<div>用户名:<input #username="ngModel" ngModel name="username" type="text" ></div>
<div>手机号:<input type="text" ></div>
<div>密码:<input type="password" ></div>
<div>确认密码:<input type="password"></div>
<button type="submit">注册</button>
</form>
<div>
<!-- 管道 将对象转换为json对象 -->
{{myForm.value | json}}
<p>{{username.value}}</p>
</div>