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

Question

我使用的是 Angular 4.2.4，但在控制台中出现错误:

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

当我将 FormsModule 包含在文件 app.module.ts 中时，就像

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 - "Can't bind to 'ngModel' since it isn't a known property of 'input' " error

Angular 2: Can't bind to 'ngModel' since it isn't a known property of 'input'

Can't bind to 'ngModel' since it isn't a known property of 'input'

请帮忙解决

Answer 1

来自维基百科，

This error often means that you haven't declared the directive "x" or haven't imported the NgModule to which "x" belongs.

You also get this error if "x" really isn't a property or if "x" is a private component property (i.e., lacks the @Input or @Output decorator).

For example, if "x" is ngModel, you may not have imported the FormsModule from @angular/forms.

Perhaps you declared "x" in an application feature module but forgot to export it? The "x" class isn't visible to other components of other NgModules until you add it to the exports list

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

从'@angular/forms'导入{FormsModule,ReactiveFormsModule};

希望对你有帮助!!