【Angular】ngForm指令失效的错误

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/81913221

前言
重新思考
解决问题
例子实现

前言

  小编在学习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> 

小结

  Angular中的指令学习，非常值得研究和思考，继续向下学习和思考吧，加油！
感谢您的访问！