无法绑定到“ngModel”,因为它不是“input”的已知属性

IT技术 javascript angular typescript input
2021-01-16 04:45:24

启动我的 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";
}
6个回答

对,就是那样。app.module.ts文件中,我刚刚添加了:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
至于把它放在哪里(关于 Jasmine 错误):stackoverflow.com/questions/39584534/...
2021-03-15 04:45:24
这有效,但只有在我将它导入到我的子module之后。初学者并不完全清楚这不会被子module继承。
2021-03-26 04:45:24
对于那些因为 Jasmine 的类似失败而发现这一点的人,您还需要将这些导入添加到component.spec.ts文件中。
2021-03-28 04:45:24
就我而言,我使用大括号是错误的。我正在使用[{ngModel}]而不是正确的:[(ngModel)]
2021-03-31 04:45:24
实际上,我更喜欢 Gabriele 的这个答案(这只是一个链接)。在这里,提供了确切的代码。令人讨厌的是,我在 PluralSight 上遵循 John Paps 的“Angular 2 简介”之后遇到了这个问题,甚至没有提到这个问题。对他们来说,2 路绑定刚刚奏效。
2021-04-05 04:45:24

为了能够对表单输入使用双向数据绑定,您需要FormsModule在 Angular module中导入包。

有关更多信息,请参阅此处的 Angular 2 官方教程forms的官方文档

@PetLahev 您在本教程中遇到的问题是,在 8 月 7 日,当您开始时,教程正在运行候选版本 4。截至 8 月 8 日,它们处于候选版本 5,它具有不同的语法
2021-03-13 04:45:24
FORM_DIRECTIVES 死了以防万一
2021-03-31 04:45:24
我不得不承认我在星期一(4 天前)开始使用 Angular 并且正在做他们的教程,所以我很确定我做错了什么,但对我来说导入 FormsModule 没有用。然后我添加 import { FORM_DIRECTIVES } from '@angular/forms';并添加了FORM_DIRECTIVESto 指令,是的,我的绑定再次工作(很明显它在 rc5 发布之前工作)
2021-04-06 04:45:24
2021-04-06 04:45:24
如果您使用的是 SharedModule,那么您可能还需要在那里导入 FormsModule,这是毫无value的。
2021-04-09 04:45:24

[(ngModel)]Angular 245+ 中使用,您需要从 Angular 表单中导入FormsModule ...

此外,它位于GitHub 上Angular 存储库中的表单下的此路径中

角度/包/表单/src/指令/ng_model.ts

也许这不是一个为非常愉快的AngularJS开发者,你可以使用NG-模型之前的任何时间无处不在,但作为角试图单独的module来使用任何你想你想的时候使用,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 { }

此外,这些是 FormsModulengModelAngular4的当前起始注释

/**
 * `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并使独立真实...

[ngModelOptions]="{standalone: true}"

有关更多信息,请查看此处Angular 部分中的ng_model

您需要导入 FormsModule。

打开app.module.ts并添加行

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

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

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

如果您将在 the FormsModule only使用,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其他任何地方忘记导入

我在使用表单功能的子module中需要它。更高的层次结构是不够的。
2021-04-02 04:45:24