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的文档就动手实践了,知识体系不连贯导致出现了这个问题

  • 相关阅读:
    陶瓷电容的结构、工艺、失效模式
    Vue.js最佳实践
    Vue 超快速学习
    CSS 小技巧
    HTML5 Canvas
    webkit下面的CSS设置滚动条
    Some untracked working tree files would be overwritten by checkout. Please move or remove them before you can checkout. View them
    JSCS: Please specify path to 'JSCS' package
    React中ref的使用方法
    React 60S倒计时
  • 原文地址:https://www.cnblogs.com/Mxy-cnblog/p/10032929.html
Copyright © 2011-2022 走看看