不能绑定到'ngModel',因为它不是'input'的已知属性。

javascript angular typescript input


我在启动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沉船,但我看了一下,和我的代码没有任何区别。

这里是组件文件。

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 Anthony Brenelière


是的,就是这样,在app.module.ts中,我只是在app.module.ts中添加了.NET。

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

[...]

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



Answer 2 Gabriele Ciech


为了能够对表单输入使用双向数据绑定,您需要在 Angular 模块中导入 FormsModule 包。有关更多信息,请参见此处Angular 2 官方教程和表单的官方文档。




Answer 3 Alireza


对于使用 [(ngModel)]角245+,你需要进口FormsModule从角形态...

也正是在下形成这个路径角回购github上

角/包/表格/ src /指令/ ng_model.ts

也许这不是一个非常高兴的AngularJs开发者,你可以使用NG-模型之前的任何时间无处不在,但作为角试图单独的模块来使用任何你想你想的时候使用,ngModelFormsModule现在。

另外,如果您使用的是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 { }

这也是 ngModelAngular4 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}"

欲了解更多信息,请看ng_model在角部分在这里




Answer 4 PRao


你需要导入FormModule

打开app.module.ts

并增加行

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

and

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



Answer 5 KhoPhi


抛出这个也许能帮到某人。

假设你已经创建了一个新的NgModule,说 AuthModule 专门处理您的验证需求,确保进口 FormsModule 在AuthModule

如果你会使用 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 其他地方。