Angular 报错 Can't bind to 'formGroup' since it isn't a known property of 'form'

错误描述

当form表单加FormGroup属性时报错 Can‘t bind to ‘formGroup‘ since it isn‘t a known property of ‘form‘

 <form nz-form [formGroup]="valForm" (ngSubmit)="submit()" role="form">
                <div nz-form-item>
                    <div nz-form-control [nzValidateStatus]="valForm.controls.email">
                        <nz-input formControlName="email" [nzPlaceHolder]="‘邮箱‘" [nzSize]="‘large‘">
                            <ng-template #suffix>
                                <i class="anticon anticon-mail"></i>
                            </ng-template>
                        </nz-input>
                        <div nz-form-explain *ngIf="valForm.controls.email.dirty&&valForm.controls.email.hasError(‘required‘)">邮箱必填</div>
                    </div>
                </div>
                <div nz-form-item>
                    <div nz-form-control [nzValidateStatus]="valForm.controls.password">
                        <nz-input formControlName="password" [nzPlaceHolder]="‘密码‘" [nzType]="‘password‘" [nzSize]="‘large‘">
                            <ng-template #suffix>
                                <i class="anticon anticon-lock"></i>
                            </ng-template>
                        </nz-input>
                        <div nz-form-explain *ngIf="valForm.controls.password.dirty&&valForm.controls.password.hasError(‘required‘)">密码必填</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-col [nzSpan]="12">
                        <label nz-checkbox formControlName="remember_me">
                            <span>记住密码</span>
                        </label>
                    </div>
                    <div nz-col [nzSpan]="12" class="text-right">
                        <a [routerLink]="[‘/forget‘]">注册</a>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-col [nzSpan]="24">
                        <button nz-button [disabled]="!valForm.valid" [nzType]="‘primary‘" [nzSize]="‘large‘" class="ant-btn__block">
                            <span>登录</span>
                        </button>
                    </div>
                </div>
            </form>

原因分析与解决方案

在使用form表单时,如果用到了form-group与formControlName,需要在app.module.ts中的import引入的不仅仅有FormsModule,还要引入ReactiveFormsModule。如果是懒加载,则按需在各自的module中引入。如下:

import { CommonModule } from ‘@angular/common‘;
import { NgModule } from ‘@angular/core‘;
import { ReactiveFormsModule, FormsModule } from ‘@angular/forms‘;
import { LoginComponent } from ‘./login/login.component‘;

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule
           ],
    declarations: [
        LoginComponent
    ],
    providers: [
    ]
})
export class AccountModule {

}

Angular 报错 Can't bind to 'formGroup' since it isn't a known property of 'form'

时间: 2024-10-12 05:30:43

Angular 报错 Can't bind to 'formGroup' since it isn't a known property of 'form'的相关文章

Can&#39;t bind to &#39;formGroup&#39; since it isn&#39;t a known property of &#39;form&#39;

在APP.module.ts中引入FormsModule, ReactiveFormsModule. 1 import { BrowserModule } from '@angular/platform-browser'; 2 import { NgModule } from '@angular/core'; 3 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 5 import { AppComponent

angular报错:Please add a @Pipe/@Directive/@Component annotation

angular 报错 ERROR Error: Uncaught (in promise): Error: Unexpected module 'B' declared by the module 'A'. Please add a @Pipe/@Directive/@Component annotation. 当在一个"模块A"文件中导入(import)另一个"模块B"时, 被导入的模块需要添加到当前这个模块的@ngModule修饰器中的imports字段中,如果

PA模块报错-实际返回的行数超出请求的行数(分析标准FORM报错解决思路)

录入预算报错时报错: 分析:这个错误是select into 语句返回多行的结果,但具体在哪? 两种方法查找,trace 或者debug 1.trace 启用调试 获取trace文件 -bash-3.2$ tkprof ERPDEV_ora_7532_RICK.trc $HOME/7532_rick.fchela.txt TKPROF: Release 11.2.0.2.0 - Development on Mon Jul 28 11:21:34 2014 Copyright (c) 1982,

fiddler启动报错Unable to bind to port [8888],ErrorCode:10106

启动运行fiddler 报错,提示Unable to bind to port [8888],ErrorCode:10106 解决方式: 使用Fiddler或其他类似的监听工具出现这种错误时, Unable to bind to port [8888]. ErrorCode: 10106cmd下面执行命令 netsh winsock reset  然后重启电脑就可以了 原文地址:https://www.cnblogs.com/lxs1314/p/8257824.html

使用Vue报错 --- &quot;TypeError: fn.bind is not a function&quot;

使用Vue报错[Vue warn]: Error in nextTick: "TypeError: fn.bind is not a function"页面进不去. 解决思路: (1)看报错信息是methods里有个方法你写的并不是一个函数,可能写了个对象什么的,vue进行fn.bind()处理的时候,.bind取到的可能是undefined. (2) 检查一下你methods里面的方法  ,  看看data mounted methods 写的是方法还是对象 原文地址:https:/

angular报错日常记录

c1—— 遍历json的key...value的时候报错: [tslint] for (... in ...) statements must be filtered with an if statement 原代码: for (let key in this.targetList[0]) { this.tableHeaders.push({ value: key, name: key }) } 修改为: for (const key of Object.keys(this.targetList

修改nignx报错Nginx [emerg]: bind() to 0.0.0.0:80 failed (98: Address already in use)

Nginx [emerg]: bind() to 0.0.0.0:80 failed (98: Address already in use) 这个错误是修改了nginx的配置时出现,表名80端口被程序占用 列出所有端口: netstat –ntlp 发现端口是被nginx本身占用了,于是关闭占用80端口的程序 sudo fuser -k 80/tcp 之后开启nginx无异常 使用linux一键安装包安装的环境 http://lnmp.org/

Angular报错记录

一 找不到Controller 出现这种错误,一般都是没有找到需要的Controller,需要仔细检查是否所需的Controller已经正确引入

Can&#39;t bind to &#39;ngModel&#39; since it isn&#39;t a known property of &#39;input&#39;.

angular项目启动报错 Can't bind to 'ngModel' since it isn't a known property of 'input'. 原因:当前module模块未引入 'ngModel',  把 FormsModule 添加到 @NgModule 元数据的 imports 数组中即可 Can't bind to 'ngModel' since it isn't a known property of 'input'. 原文地址:https://www.cnblogs