zoukankan      html  css  js  c++  java
  • 使用angular 6 +ng-zorro-antd中的 Form表单 控制台报错

    错误代码:

    Uncaught Error: Template parse errors:
    Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
        <form nz-form [ERROR ->][formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
          <nz-form-item>
           "): ng:///AppModule/LoginComponent.html@1:18
    No provider for ControlContainer ("
        [ERROR ->]<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
          <nz-form"): ng:///AppModule/LoginComponent.html@1:4
    No provider for NgControl ("
            <nz-form-control>
              <nz-input-group [nzPrefix]="prefixUser">
                [ERROR ->]<input type="text" nz-input formControlName="userName" placeholder="Username">
              </nz-input-g"): ng:///AppModule/LoginComponent.html@5:12
    ...
    //后面还有一堆错误
    

    执行过程

    在vscode的集成终端里 执行 ng new project 后 ng add ng-zorro-antd
    之后利用 ng-zorro-antd 的表单创建了一个组件ng g ng-zorro-antd:form-normal-login -p app --styleext=less --name=login

     ng new project
     ng add ng-zorro-antd
     ng g ng-zorro-antd:form-normal-login -p app --styleext=less --name=login
    

    在配置好了路由之后,运行项目,就出现了一开始的问题

    解决办法

    在app.module.ts里除了FormsModule还要引入ReactiveFormsModule

    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    ...
    //放入import 数组里
    import:[
        ...
            ReactiveFormsModule
        ...
    ]
    

    总结

    用到了响应式表单,需要引入ReactiveFormsModule才行,因为没有看完Angular的文档就动手实践了,知识体系不连贯导致出现了这个问题

  • 相关阅读:
    java纯数字加密解密实例
    C++手稿:std::string
    java裁剪图片
    java打开windows系统的浏览器
    Android手机无线adb
    office-word
    设计模式-享元模式(13)
    设计模式-外观模式(12)
    charles工具过滤腾讯视频播放器广告
    js将json格式的list转换为按某个字段分组的map数组
  • 原文地址:https://www.cnblogs.com/Mxy-cnblog/p/10032929.html
Copyright © 2011-2022 走看看