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

Question

启动Angular应用程序时出现以下错误，即使未显示该组件也是如此。

我必须对<input>发表评论，以便我的应用有效。

    zone.js:461 Unhandled Promise rejection: Template parse errors:
    Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <div>
            <label>Created:</label>
            <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
        </div>
    </div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

我正在看Hero plunker，但我认为我的代码没有任何区别。

这是组件文件：

    import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
    import { Intervention } from '../../model/intervention';

    @Component({
        selector: 'intervention-details',
        templateUrl: 'app/intervention/details/intervention.details.html',
        styleUrls: ['app/intervention/details/intervention.details.css']
    })

    export class InterventionDetails
    {
        @Input() intervention: Intervention;

        public test : string = "toto";
    }

Answer 1

是的，就是它，在app.module.ts中，我刚刚补充道：

...
string_id1.1470913344067
string_id1.1470913345067
string_id2.1470913344067
string_id2.1470913345067
...

Answer 2

为了能够对表单输入使用双向数据绑定，您需要在FormsModule模块中导入Angular包。 有关详细信息，请参阅Angular 2官方教程here和forms的官方文档

Answer 3

在 Angular 2 中使用[(ngModel)]， 4 ＆amp; 5 + ，您需要从Angular表单导入 FormsModule ...

在 github 中Angular repo中的表单下也是这个路径：

  

angular / packages / forms / src / directives / ng_model.ts

对于 AngularJs开发人员而言，这可能不是很高兴，因为您可以随时随地使用 ng-model ，但是当Angular尝试将模块分开使用时我希望您当时想要使用， ngModel 现在位于 FormsModule 。

此外，如果您使用 ReactiveFormsModule，也需要导入它。

只需查找 app.module.ts ，并确保您已导入FormsModule ...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //<<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

这也是 FormsModule 中Angular4 ngModel的当前开始评论：

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

如果您想使用输入而不是表单，可以将其与ngModelOptions一起使用，并使其独立 true ......

[ngModelOptions]="{standalone: true}"

有关详细信息，请参阅Angular部分here中的 ng_model

Answer 4

您需要导入FormsModule

打开 app.module.ts

并添加行

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

和

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

Answer 5

投掷这可能有助于某人。

假设您已创建新的NgModule，请说AuthModule专门用于处理您的Auth需求，请确保在该AuthModule 中导入FormsModule。

如果您仅在FormsModule中使用AuthModule，则无需导入默认FormModule中的AppModule

AuthModule中的类似内容：

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

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

如果您未在其他地方使用AppModule，请忘记导入FormsModule。

Answer 6

要摆脱此错误，您需要遵循两个步骤

1. 在您的应用模块中导入FormsModule
2. 将其作为@NgModule装饰器中的导入值
传递

基本上app.module.ts应如下所示：

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';       
    import { AppComponent }  from './app.component';
    import {AppChildComponent} from './appchild.component';
    @NgModule({
      imports:      [ BrowserModule,FormsModule ],
      declarations: [ AppComponent, AppChildComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

希望有所帮助

Answer 7

您需要导入 FormsModule。

打开 app.module.ts 并添加行

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

和

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

Answer 8

在您的应用模块中导入 FormsModule 。

它可以让你的应用程序运行良好。

PARTITION BY

Answer 9

如果您首先需要使用[(ngModel)]，则需要在FormsModule中导入app.module.ts，然后添加导入列表。像这样：

app.module.ts

1. 导入import {FormsModule} from "@angular/forms";
2. 添加导入 imports: [ BrowserModule, FormsModule ],

app.component.ts

1. 示例：<input type="text" [(ngModel)]="name" >
2. 然后<h1>your name is: {{name}} </h1>

Answer 10

将FormModule导入一个app.module

import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })

Answer 11

我正在使用Angular 5.

就我而言，我也需要导入RactiveFormsModule。

app.module.ts（或anymodule.module.ts）

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

Answer 12

  

简单的灵魂：在app.module.ts

***Example 1***
import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

示例2 ：

  

如果要使用[（ngModel）]，则必须导入FormsModule   在app.module.ts

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 13

我正在使用Angular 7

我必须导入RactiveFormsModule，因为我正在使用FormBuilder类创建反应形式。

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

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

Answer 14

ngModel 应该从 @ angular / forms 导入，因为它是FormsModule的一部分。因此，我建议您以如下方式更改app.module.ts：

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

[...]

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

Answer 15

如果有人在应用接受的解决方案后仍然出现错误，则可能是因为您在组件中有一个单独的模块文件，您要在其中使用输入标记中的ngModel属性。在这种情况下，也可以在组件的module.ts文件中应用已接受的解决方案。

Answer 16

如果您在正确导入FormsModule后仍然出现错误，请检查您的终端或（Windows控制台），因为您的项目未编译（因为可能是其他任何错误）并且您的解决方案未反映在您的浏览器中！

在我的情况下，我的控制台出现以下无关错误：'ApiService'类型中不存在属性'retrieveGithubUser'。

Answer 17

我知道这个问题是关于Angular 2的，但我是Angular 4，这些答案都没有帮助。

在Angular 4中，语法必须是

[(ngModel)]

希望这有帮助。

Answer 18

ngModel是FormsModule的一部分。并且应该从@ angular / forms导入以与ngModel一起使用。

请按如下所示更改app.module.ts：

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

[...]

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

Answer 19

如果此组件位于根目录（即 app.module.ts

）中，则需要在 root 模块中导入 FormsModule 。

请打开app.module.ts

从 @ angular / forms

导入 FormsModule

例如：

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

和

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

Answer 20

ngModel 来自FormsModule。在某些情况下，您会收到此类错误：

1. 您没有将FormsModule导入到声明了组件的模块（使用ngModel的组件）的import数组中。
2. 您已将FormsModule导入一个模块，该模块是从另一个模块继承的。在这种情况下，您有两个选择：
   • 让FormsModule从两个模块（模块1和模块2）导入到导入数组中。 通常，导入模块不提供对其导入模块的访问。（导入不会继承）

• 在Form1中将FormsModule声明为导入和导出数组，以便在model2中也能看到它

1. （在某些版本中，我遇到了此问题）您已正确导入FormsModule，但问题出在输入HTML标记上。 您必须为输入添加名称标签属性，并且[（ngModel）]中的对象绑定名称必须与 name 属性

   中的名称相同。

   

Answer 21

在该模块中，您愿意使用 ngModel ，您必须导入 FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

Answer 22

在ngModule中，您需要导入FormsModule，因为ngModel来自FormsModule。 请修改您的 app.module.ts ，就像我共享的以下代码

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    declarations: [
         AppComponent,
         HomeComponent
    ],
    imports: [
         BrowserModule,
         AppRoutingModule,
         FormsModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 23

您需要导入 FormsModule。

#Open app.module.ts
#add the lines

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

@NgModule({
    imports: [
       FormsModule   <--------add this 
    ],
})


if you are using reactive form then also added  ReactiveFormsModule

Answer 24

有时候，如果我们已经导入了BrowserModule，FormsModule和其他相关模块，尽管遇到了相同的错误，那么我意识到我们需要在订单中导入它们万一我错过了。因此顺序应类似于BrowserModule，FormsModule，ReactiveFormsModule。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule     
  ],
  providers: [],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

希望这对某人有帮助..：）

Answer 25

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 26

在要使用[[ngModel）]的模块中导入FormsModule

Answer 27

对于我的场景，我必须将[CommonModule]和[FormsModule]导入我的模块

ADestEncoding

Answer 28

这适用于使用纯JavaScript而不是Type Script的人。除了在页面顶部引用表单脚本文件之外，如下所示

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

您还应该告诉模块加载器加载ng.forms.FormsModule。进行更改后，imports方法的NgModule属性如下所示

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

快乐的编码！

Answer 29

当您尝试在不同模块中使用未共享的模块中的组件时，有时会出现此错误。

例如，您有2个模块，其中包含module1.componentA.component.ts和module2.componentC.component.ts，并且您尝试在module2内的模板中使用module1.componentA.component.ts中的选择器（例如{{ 1}}），它会抛出someInputVariableInModule1在module1.componentA.component.ts中不可用的错误 - 即使你在module1.componentA中有<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">。

如果发生这种情况，您希望共享module1.componentA以便在其他模块中可访问。 因此，如果您在sharedModule中共享module1.componentA，则module1.componentA将可在其他模块中使用（在module1之外），并且导入sharedModule的每个模块都将能够访问其模板中的选择器，注入{{1}声明变量。

Answer 30

即使未在FormsModule上声明导入的组件，即使在功能模块中直接或间接导入了declarations（例如从共享模块），也会发生此错误：

我遵循了Deborah Kurata的Angular Routing课程，而我在Angular Route的component属性上添加了导入的组件 ProductEditInfoComponent ，但我忘记在declarations属性上添加了ProductEditInfoComponent。

在声明属性上添加ProductEditInfoComponent可以解决 NG8002：由于它不是'input'的已知属性，因此无法绑定到'ngModel'。问题

Answer 31

当我第一次做这个教程时，main.ts看起来与现在略有不同。它看起来非常相似，但请注意差异（最重要的是正确的）。

正确：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

旧教程代码：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

Answer 32

尽管答案可以解决问题，但我想提供更多有关此主题的信息，因为我在开始Angular项目时也遇到了这个问题。

初学者应该理解，表单有两种主要类型，它们是反应型表单和模板驱动型表单。从角度2开始，建议对任何形式使用反应形式。

反应形式更强大：它们更具可伸缩性，可重用性和可测试性。如果表单是应用程序的关键部分，或者您已经在使用反应式构建应用程序，请使用反应式。

模板驱动的表单对于将简单表单​​添加到应用程序非常有用，例如电子邮件列表注册表单。它们很容易添加到应用程序中，但是不像可伸缩表单那样可扩展。如果您有非常基本的表单要求和逻辑，可以仅在模板中进行管理，请使用模板驱动的表单。

有关更多详细信息，请参见angular documents。

提到这个问题，[(ngModel)]="..."基本上是一种绑定语法。为了在组件html页面中使用此功能，您应该在 NgModule （组件所在的位置）中导入 FormsModule 。现在[(ngModel)]用于简单的双向绑定，或者在您的表单中用于任何输入html元素。

另一方面，要使用反应形式，请从ReactiveFormsModule包中导入@angular/forms，并将其添加到NgModule的imports数组中。

例如，如果我的组件html在任何html元素中都没有[（ngmodel）]，则无需导入FormsModule。

在下面的示例中，我已经完全使用了Reactive Forms，因此不需要在NgModule中使用FormsModule

创建GroupsModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GroupsRoutingModule, routedAccountComponents } from './groups-routing.module';
import { ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';
import { ModalModule } from 'ngx-bootstrap';
@NgModule({
    declarations: [
        routedAccountComponents
    ],
    imports: [
        CommonModule,        
        ReactiveFormsModule,
        GroupsRoutingModule,
        SharedModule,
        ModalModule.forRoot()
    ]
})
export class GroupsModule {
}

创建路由模块（与主要代码分开，以提高可读性）

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GroupsComponent } from './all/index.component';
import { CreateGroupComponent } from './create/index.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'groups',
    pathMatch: 'full'
  },
  {
    path: 'groups',
    component: GroupsComponent
  }
];


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class GroupsRoutingModule { }


export const routedAccountComponents = [
  GroupsComponent,
  CreateGroupComponent
];

CreateGroupComponent html代码

<form [formGroup]="form" (ngSubmit)="onSubmit()">        
        <label for="name">Group Name</label>
        <div class="form-group">
            <div class="form-line">
                <input type="text" formControlName="name" class="form-control">
            </div>            
        </div>
    </form>

CreateGroupComponent ts文件

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { DialogResult } from 'src/app/shared/modal';
import { FormGroup, FormControl, AbstractControl } from '@angular/forms';
import { Subject } from 'rxjs';
import { ToastrService } from 'ngx-toastr';
import { validateAllFormFields } from 'src/app/services/validateAllFormFields';
import { HttpErrorResponse } from '@angular/common/http';
import { modelStateFormMapper } from 'src/app/services/shared/modelStateFormMapper';
import { GroupsService } from '../groups.service';
import { CreateGroup } from '../model/create-group.model';

@Component({
    selector: 'app-create-group',
    templateUrl: './index.component.html',
    providers: [LoadingService]
})

export class CreateGroupComponent implements OnInit {   
    public form: FormGroup;
    public errors: string[] = [];
    private destroy: Subject<void> = new Subject<void>();

    constructor(
        private groupService: GroupsService,        
        private toastr: ToastrService
    ) { }

    private buildForm(): FormGroup {
        return new FormGroup({
            name: new FormControl('', [Validators.maxLength(254)])
        });
    }

    private getModel(): CreateGroup {
        const formValue = this.form.value;
        return <CreateGroup>{
            name: formValue.name
        };
    }

    public control(name: string): AbstractControl {
        return this.form.get(name);
    }

    public ngOnInit() {
        this.form = this.buildForm();
    }


    public onSubmit(): void {

         if (this.form.valid) {
             // this.onSubmit();
             //do what you need to do
         }
    }
}

希望这有助于开发人员了解为什么以及何时需要使用 FormsModule 。

Answer 33

这是一个youtube视频，它说明了如何解决该问题，您可以从Youtube link中观看视频。下面是相同内容的文字说明。

角度错误“无法绑定到'ngModel'，因为它不是已知属性 “输入””

上面错误消息的简单翻译是：不理解“ ngModel”指令，并且需要加载必要的Angular模块，以便语法起作用。

要使“ ngModel”指令在HTML中运行，我们需要从“ @ Angular / forms”导入“ FormModules”。以下是另一种类似的错误，但与“ FormsGroup”有关。在以下情况下，我们应该加载ReactiveFormsModule。

模板解析错误：由于未知，无法绑定到“ formGroup” “表单”的属性。

出现上述错误时，您可以寻找“ [Error->]” 文本的小技巧，箭头指向Angular无法理解的指令。

Answer 34

您需要导入FormsModule

打开 app.module.ts

并添加行

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

和

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

Answer 35

我遇到了同样的问题，原因是我在MenuComponent中使用了ngModel。我导入了MenuComponent in app.module.ts，但忘了声明。

声明MenuComponent解决了我的问题。即，如下图所示：

Answer 36

注意：请记住，ngModel指令已定义为Angular FormsModule的一部分，并且您需要在想要使用它的Angular模块元数据的imports：[...]部分中包括FormsModule。

Answer 37

对我来说，问题是，我忘记在模块的声明数组中声明该组件。

@NgModule({
 declarations: [yourcomponentName]
})

Answer 38

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

@NgModule({
  imports: [

    FormsModule
  ],

})

Answer 39

此错误的主要原因是您忘记在 app.module.ts 中导入 FormsModule。

但有时在大型项目中，您可能会忘记在其模块中添加组件并遇到此错误。

Answer 40

实际上在大多数情况下，FormsModule 已经被导入。所以你要做的就是确保

1. 您的组件已正确添加到 app.module.ts 文件的声明数组中。
2. 您应该验证绑定是否拼写正确。正确的拼写是 [(ngModel)]

Answer 41

运行角度测试时出现相同的错误，因为没有在规格文件中添加FormsModule。我们需要将其添加到所有规范文件中，而要使应用程序成功运行，我们将其添加到app.module.ts中的一个位置。

Answer 42

在 Angular 中使用双向绑定之前，您需要将 FormsModule 包导入到您的模块中。

您可以像这样将 FormsModule 添加到模块（例如 app.module.ts）内的导入数组中。

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

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

Answer 43

确保使用模板驱动的表单方法 (https://angular.io/guide/forms)，正如@Nikita Sychou 已经提到的，您已经使用“名称”属性装饰了输入字段，例如

<form>
   <input [(ngModel)]="form.email" name="email"></input>

并且 FormsModule 已经被导入到关联的 @NgModule 中。两者都是避免“无法绑定到 ngModel”错误的先决条件。如果您的 IDE 中仍然出现样式错误，例如IntelliJ 抱怨 ngModel 指令只是忽略它们......你很高兴:-)

Answer 44

对于Angular 2中的任何版本，您都需要在app.module.ts文件中导入FormsModule，它将解决此问题。

Answer 45

我正在使用Angular 9，并且具有带有[formGroup]属性的'

我仅通过删除（ngModel）部分来解决了该错误。

Answer 46

最近，我发现不仅在您忘记在模块中导入FormsModule的情况下，才会发生错误。就我而言，问题出在此代码中

<input type="text" class="form-control" id="firstName"
                   formControlName="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

我通过更改 formControlName -> 名称

进行了修复

<input type="text" class="form-control" id="firstName"
                   name="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

我希望这个答案可以为遇到同样问题的人节省时间。

Answer 47

即使我如上所述添加了 FormsModule，我也遇到了同样的错误。因此，只需简单重启即可完成工作。