Невозможно связать с 'ngModelOptions', поскольку это не известное свойство 'input' в Angular 6

Question

Вот мой 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>

Вот ошибка в Chrome:

Вот 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]
})

Я использую следующее:

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

Answer 1

Вы также должны импортировать ReactiveFormsModule.

Это будет работать.

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

Answer 2

Вы пропустили импорт CommonModule of angular, который предоставляет структурные директивы, относящиеся к ngmodel.

Обновление ответа выше:

Вы смешиваете реактивные формы и шаблонные формы.Удалите свойство [formControlName], так как мы не можем использовать FormsModule и ReactiveForms вместе

, если вы удалите вышеперечисленное, оно работает нормально.Вы можете увидеть ниже стекаблиц https://stackblitz.com/edit/ng-zorro-antd-setup-juf9hp

Answer 3

Вам необходимо импортировать FormsModule в app.component.ts файл

Шаги:

1. Открыть app.module.ts

2. Добавить следующий оператор импорта

   import { FormsModule } from '@angular/forms';
   

3. Добавить FormsModule в import @ NgModule

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

Конечный код:

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 { }