未捕获的错误:模板解析错误:由于它不是'input'的已知属性，因此无法绑定到'ngModel' [英] Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'

问题描述

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

I'm using Angular 4.2.4 and I am getting an error in the console :

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

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

while I include FormsModule in file app.module.ts like as

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

并且通过html代码是

and by html code is as

<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;

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

I already see the below links but not get any solutions

Angular4-无法绑定到'ngModel'，因为它不是'input'的已知属性"错误

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

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

请帮助解决该问题

推荐答案

来自Wiki，

此错误通常意味着您尚未声明指令"x"或尚未导入"x"所属的NgModule.

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

如果"x"实际上不是属性或"x"是一个属性，您也会收到此错误私有组件属性(即缺少@Input或@Output装饰).

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).

例如，如果"x"是ngModel，则可能尚未导入来自@ angular/forms的FormsModule.

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

也许您在应用程序功能模块中声明了"x"但忘记了出口吗?"x"类对其他组件的其他组件不可见NgModules，直到将其添加到导出列表中

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'

So just import 'FormsModule' in 'UserAddComponent'

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

希望有帮助！

这篇关于未捕获的错误:模板解析错误:由于它不是'input'的已知属性，因此无法绑定到'ngModel'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！