未捕获的错误：模板解析错误：无法绑定到“ngModel”，因为它不是“输入”的已知属性

Posted 2023-03-13

【中文标题】未捕获的错误：模板解析错误：无法绑定到“ngModel”，因为它不是“输入”的已知属性

【英文标题】：Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'

【发布时间】：2018-05-21 03:23:14

【问题描述】：

我正在使用 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 - "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'

请帮忙解决

【问题讨论】：

请在声明UserAddComponent的地方添加@NgModule的代码。您必须在那里导入 FormsModule 或导入导出 FormsModule 的模块

【参考方案1】：

来自维基，

这个错误通常意味着你没有声明指令“x”或 还没有导入“x”所属的NgModule。

如果“x”确实不是属性或者“x”是 私有组件属性（即，缺少 @Input 或 @Output 装饰）。

例如，如果“x”是 ngModel，您可能没有导入 @angular/forms 中的 FormsModule。

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

所以只需在 'UserAddComponent' 中导入 'FormsModule'

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

希望对你有帮助！！