14

我正在从官方网站学习 Angular 4，并通过ngModel进行了2 路数据绑定。但是，一旦我将 [(ngModel)] 添加到我的组件模板中，我的应用程序就会停止工作，即使 FormsModule 已导入到 module.ts 文件中。组件不加载。
我正在使用 Visual Studio 代码。
这是我的 app.component.ts

import { Component } from '@angular/core';

    export class Hero {
      id: number;
      name: string;
    }



    @Component({
      selector: 'app',
      template: `
      <h1>{{ title }}</h1>
      <h2>{{hero.name}} details!</h2>
      <div><label>Id:</label> {{hero.id}} </div>
      <div>name:<input [(ngModel)]="hero.name" type="text"></div>
      `,
      styles:[`
        .selected{
          transition: padding 0.3s;
          color: mediumseagreen;
        }
      `]
    })

    export class AppComponent {
      title = 'Tour Of Heroes';

     hero:Hero = {
       id:1,
       name:"Mr. Invisible"
     };
    }

这是 app.module.ts 

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

    import { AppComponent, Hero } from './app.component';

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

AppComponent 未加载，仅显示

正在加载...

4

8 回答 8

29 
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

    import { AppComponent, Hero } from './app.component';

    @NgModule({
      declarations: [
        AppComponent

      ],
      imports: [
        BrowserModule,
        FormsModule  // forms module should be in imports not in declarations
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
于 2017-06-28T05:26:16.137 回答
14

正如其他人指出的那样，导入FormsModule（例如在您的app.module.ts文件中）很重要。在这个特定的问题中，导入部分中缺少它。

但我添加了这个答案是为了警告你一些我不时遇到的其他事情。

如果您只是使用ngModel独立的，在某处没有表单，则不必name为输入指定 a。

<input ... [(ngModel)]="model.something"`>

但是当你在表单中使用它时，这个name属性就变成了强制性的！

<form>
  <input ... name="something" [(ngModel)]="model.something"`>
</form>

它实际上在文档中：

在标签中使用 ngModel 时，您还需要提供一个 name 属性，以便控件可以使用该名称注册到父窗体。

如果你错过了它，它根本不会显示任何错误，它只是不起作用。

于 2020-06-12T12:32:59.187 回答
6

除了在模块声明部分FormsModule需要之外imports，您还必须使用form标签或ngForm指令来启用ngModel功能。

withoutou 也可以使用独立控件来使用ngModel，如下所示：

 <input [(ngModel)]="variable" #ctrl="ngModel" >

来源：角度文档

于 2017-10-10T07:43:25.773 回答
3 
// add the import in module and add FormModule in import:
import { NgModule } from '@angular/core'
 imports: [
    BrowserModule,
   // add FormModule in import
    FormsModule
]
于 2017-11-12T17:12:17.987 回答
0 
    import { FormsModule } from '@angular/forms';

请注意，如果您在自定义模块中存在的组件中使用 [(ngModel)]，则必须将此行添加到您的 custom.module 而不是 app.module。

在这种情况下，通过将此行添加到 app.module 没有任何变化，您仍然会看到错误。

于 2021-11-03T18:58:12.330 回答
0

双向绑定

在 app.module.ts 里面

从“@angular/forms”导入 { FormsModule }；

进口：[ FormsModule ]，

于 2021-08-01T14:07:27.587 回答
0 
import { FormsModule } from '@angular/forms';

然后@NgModule(){imports:[FormsModule]}与其他工作人员

于 2018-07-01T12:40:42.627 回答
0

添加 import { NgModule } from '@angular/core'; 在 app-routing.module.ts 文件中。确保从 '@angular/core' 导入 { NgModule }；从“@angular/forms”导入 { FormsModule }；在 app.module.ts 中可用

进口：[ BrowserModule，FormsModule，AppRoutingModule]

于 2021-12-29T16:40:48.497 回答