项目中引用NG-ZORRO,在使用nz-form时报错 Can't bind to 'formGroup' since it isn't a known property of 'form'
component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'mv-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
validateForm: FormGroup;
_submitForm () {
for (const i in this.validateForm.controls) {
if (i) {
this.validateForm.controls[ i ].markAsDirty();
}
}
}
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.validateForm = this.fb.group({
userName: [ null, [ Validators.required ] ],
password: [ null, [ Validators.required ] ],
remember: [ true ],
});
}
}
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="_submitForm()">
<div nz-form-item>
<div nz-form-control [nzValidateStatus]="validateForm.controls.userName">
<nz-input formControlName="userName" [nzPlaceHolder]="'Username'" [nzSize]="'large'">
<ng-template #prefix>
<i class="anticon anticon-user"></i>
</ng-template>
</nz-input>
<div nz-form-explain *ngIf="validateForm.controls.userName.dirty&&validateForm.controls.userName.hasError('required')">Please input your username!</div>
</div>
</div>
<div nz-form-item>
<div nz-form-control [nzValidateStatus]="validateForm.controls.password">
<nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'Password'" [nzSize]="'large'">
<ng-template #prefix>
<i class="anticon anticon-lock"></i>
</ng-template>
</nz-input>
<div nz-form-explain *ngIf="validateForm.controls.password.dirty&&validateForm.controls.password.hasError('required')">Please input your Password!</div>
</div>
</div>
<div nz-form-item>
<div nz-form-control>
<label nz-checkbox formControlName="remember">
<span>Remember me</span>
</label>
<a class="login-form-forgot" class="login-form-forgot">Forgot password</a>
<button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'">Log in</button>
Or
<a href="">register now!</a>
</div>
</div>
</form>
解决方案:
需要从@angular/forms
导入ReactiveFormsModule
。因为FormGroupDirective
指令属于ReactiveFormsModule
一部分。
导入后的app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
HomeComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
NgZorroAntdModule.forRoot(),
AppRoutingModule,
ReactiveFormsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }