0

Here is my HTML:

<nz-form-item nzFlex [formGroup]="hulkForm">
   <nz-form-label [nzSpan]="7" [nzFor]="hulkColumn.column" 
        [nzRequired]="hulkColumn.require">{{hulkColumn.lable}}</nz-form-label>
   <nz-form-control [nzSpan]="17">
   <input nz-input 
       placeholder={{hulkColumn.placeholder}} 
       [formControlName]="hulkColumn.name"
       [(ngModel)]="hulkColumn.model"
     [ngModelOptions]="{updateOn: 'blur'}"
     name="{{hulkColumn.name}}"
        *ngIf="hulkColumn.type!=='number'"
       >
 </nz-form-control>
</nz-form-item>

Here is the error in Chrome:

Here is app.module.ts:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {NgZorroAntdModule, NZ_I18N, zh_CN} from 'ng-zorro-antd';
import {registerLocaleData} from '@angular/common';
import zh from '@angular/common/locales/zh';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';


registerLocaleData(zh);

@NgModule({
  declarations: [
  AppComponent,
  ...
  ],
  imports: [
  ...
  FormsModule,
  ReactiveFormsModule,
  ...
  ],
  providers: [{provide: NZ_I18N, useValue: zh_CN}, {provide: LocationStrategy, useClass: HashLocationStrategy}, CheckLoginGuard],
  bootstrap: [AppComponent]
})

I'm using the following:

Angular CLI: 6.2.4
Node: 8.9.0
OS: darwin x64
Angular: 6.0.7
NG-ZORRO-ANTD
3

3 Answers 3

5

You need to import FormsModule in app.component.ts file

Steps:

  1. Open app.module.ts
  2. Add the following import statement

    import { FormsModule } from '@angular/forms';
    
  3. Add FormsModule in imports @NgModule

    @NgModule({ imports: [ FormsModule ], })
    

Final code:

app.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; //----<<< Adding Import Statement
import { AppComponent } from './app.component';

@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule, 
  FormsModule //-------<< Import here
 ],
 providers: [],
 bootstrap: [AppComponent]
})

export class AppModule { }
1
  • aleady add this
    – xiaochi
    Oct 19, 2018 at 5:36
1

You have to also import ReactiveFormsModule.

That will work.

@NgModule({ imports: [ FormsModule, ReactiveFormsModule ] })
1
  • Try adding like this : <input ngModel [ngModelOptions]="{standalone: true}" ... />. In order to use ngModelOptions, the ngModel directive should be applied to the input element Oct 19, 2018 at 6:44
1

You missed to import the CommonModule of angular which provides ngmodel related structural directives.

Updating the above answer:

You are mixing the reactive forms and template forms. Please remove [formControlName] property as we cannot use FormsModule and ReactiveForms together

if you remove the above it works fine. You can see the below stackblitz https://stackblitz.com/edit/ng-zorro-antd-setup-juf9hp

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.