未捕获的错误：模板解析错误：由于它不是'input'的已知属性，因此无法绑定到'ngModel'

Question

我正在使用Angular 4.2.4，并且在控制台中遇到错误：

Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'.

当我在文件app.module.ts中包含FormsModule时

import { FormsModule,ReactiveFormsModule }   from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    ...APP_LAYOUTS,
    ...APP_COMPONENTS,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

和通过html代码是

<form id="user-add-form">
    <div class="text-center m-t-10"><span class="login-img"><i class="ti-check-box"></i></span></div>
    <h3 class="login-title">Add New User</h3>
    <div class="row">
      <div class="col-6">
        <div class="form-group">
          <input class="form-control" type="text" name="first_name" [(ngModel)]="first_name" placeholder="First Name">
        </div>
      </div>
      <div class="col-6">
        <div class="form-group">
          <input class="form-control" type="text" name="last_name" [(ngModel)]="last_name" placeholder="Last Name">
        </div>
      </div>
    </div>
    <div class="form-group">
      <input class="form-control" type="email" name="email" [(ngModel)]="email" placeholder="Email" autocomplete="off">
    </div>
    <div class="form-group">
      <input class="form-control" id="password" type="password" name="password" [(ngModel)]="password" placeholder="Password">
    </div>
    <div class="form-group">
      <input class="form-control" type="password" name="password_confirmation" [(ngModel)]="password_confirmation" placeholder="Confirm Password">
    </div>
    <div class="form-group">
      <button class="btn btn-info btn-block" type="submit">Submit</button>
    </div>
  </form>

和一些组件文件代码是

import { FormBuilder,Validator } from '@angular/forms';
export class UserAddComponent implements OnInit, OnDestroy, AfterViewInit {
    first_name: string;
    last_name: string;
    email: string;
    password: string;
    password_confirmation: string;

我已经看到以下链接，但没有任何解决方案

Angular 4-“无法绑定到'ngModel'，因为它不是'input'的已知属性”错误

Angular 2：由于它不是'input'的已知属性，因此无法绑定到'ngModel'

无法绑定到“ ngModel”，因为它不是“ input”的已知属性

请帮助解决

Answer 1

从Wiki，

此错误通常表示您尚未声明指令“ x”或尚未导入“ x”所属的NgModule。

如果“ x”实际上不是属性或“ x”是私有组件属性（即缺少@Input或@Output装饰器），也会出现此错误。

例如，如果“ x”是ngModel，则可能尚未从@ angular / forms导入FormsModule。

也许您在应用程序功能模块中声明了“ x”但忘记导出它了？在其他NgModule的其他组件中，“ x”类是不可见的，除非将其添加到导出列表中

因此，只需在“ UserAddComponent”中导入“ FormsModule”

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

希望能帮助到你 ！！