你的位置:首页 > 软件开发 > Java > Angular 报错 Cant bind to formGroup since it isnt a known property of form

Angular 报错 Cant bind to formGroup since it isnt a known property of form

发布时间:2017-11-26 03:00:08
错误描述当form表单加FormGroup属性时报错 Can't bind to 'formGroup' since it isn't a known property of 'form' <form nz-form [for ...

错误描述

当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 ></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 ></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" >      <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'" >       <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 报错 Cant bind to formGroup since it isnt a known property of form

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录