Я получил следующую ошибку при запуске моего приложения 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: 

Я смотрю на героя, но не вижу никаких отличий от моего кода.

Вот файл компонента:

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";
}
1585
Anthony Brenelière 11 Авг 2016 в 12:44

28 ответов

Лучший ответ

Да, все, в app.module.ts я только что добавил:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
1824
Jason Swett 1 Мар 2017 в 14:51

Для моего сценария мне пришлось импортировать [CommonModule] и [FormsModule] в мой модуль

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

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }
8
Mina Matta 21 Дек 2017 в 16:41

В модуле, который вы хотите использовать ngModel , вы должны импортировать FormsModule .

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }
13
Malindu Sandaruwan 17 Июл 2018 в 04:59

Я использую Angular 5.

В моем случае мне нужно было также импортировать ReactiveFormsModule.

App.module.ts (или anymodule.module.ts)

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
18
renatohlf 9 Май 2018 в 18:44

Если кто-то все еще получает ошибки после применения принятого решения, возможно, это связано с тем, что у вас есть отдельный файл модуля для компонента, в котором вы хотите использовать свойство ngModel во входном теге. В этом случае примените принятое решение и в файле module.ts компонента.

18
Subham Pasari 11 Май 2017 в 11:18

Иногда вы получаете эту ошибку, когда пытаетесь использовать компонент из модуля, который не является общим, в другом модуле.

Например, у вас есть 2 модуля с module1.componentA.component.ts и module2.componentC.component.ts, и вы пытаетесь использовать селектор из module1.componentA.component.ts в шаблоне внутри module2 (например, <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2"> ), он выдаст ошибку о том, что someInputVariableInModule1 недоступен внутри module1.componentA.component.ts - даже если у вас есть @Input() someInputVariableInModule1 в module1.componentA.

Если это произойдет, вы захотите поделиться модулем 1.componentA, чтобы он был доступен в других модулях. Таким образом, если вы поделитесь module1.componentA внутри sharedModule, module1.componentA будет использоваться внутри других модулей (вне модуля 1), и каждый модуль, импортирующий sharedModule, сможет получить доступ к селектору в своих шаблонах, вставляя {{X0} } объявленная переменная.

8
Guntram 30 Авг 2017 в 23:51

Это для людей, которые используют простой 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],

Удачного кодирования!

7
James Poulose 12 Дек 2016 в 00:37

В 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 { }
10
thevinaychoudhary 21 Июн 2019 в 05:21

Я использую Angular 7

Я должен импортировать ReactiveFormsModule, потому что я использую класс FormBuilder для создания реактивной формы.

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ], declarations: []})
28
Nicholas K 15 Ноя 2019 в 10:29

Вам необходимо импортировать FormsModule

Откройте app.module.ts

И добавить строку

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

И

@NgModule({
imports: [
   FormsModule
],
})
91
Amit Chigadani 22 Ноя 2018 в 06:10

Есть два шага, которые необходимо выполнить, чтобы избавиться от этой ошибки

  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 { }

Надеюсь, это поможет

38
debugmode 9 Дек 2016 в 07:00

Когда я впервые делал урок, 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);
5
Jordan Lapp 12 Авг 2016 в 02:52

Иногда, если мы уже импортировали BrowserModule, FormsModule и другие связанные модули, хотя я получил ту же ошибку, я понял, что нам нужно импортировать их в Order , в моем случае я пропустил Это. Таким образом, порядок должен быть таким: 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 {}

Надеюсь, это поможет кому-то .. :)

8
ganesh045 11 Окт 2019 в 12:15

NgModel является частью FormsModule. И это должно быть импортировано из @ angular / forms для работы с ngModel.

Пожалуйста, измените app.module.ts следующим образом:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
18
Anand Raja 18 Окт 2019 в 07:05

Импортируйте FormsModule в те модули, где вы хотите использовать [(ngModel)]

enter image description here

36
Arul 3 Дек 2019 в 11:49

Вбрасывание этого может помочь кому-то.

Предполагая, что вы создали новый NgModule, скажем, AuthModule, предназначенный для обработки ваших потребностей Auth, убедитесь, что вы импортировали FormsModule в этот AuthModule too .

Если вы будете использовать FormsModule ТОЛЬКО в AuthModule, вам не нужно будет импортировать FormModule IN по умолчанию 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 где-либо еще.

54
KhoPhi 24 Сен 2016 в 13:06

Вам необходимо импортировать FormsModule в свой корневой модуль, если этот компонент находится в корневом каталоге, т.е. app.module.ts .

Пожалуйста, откройте app.module.ts

Импортируйте FormsModule из @ angular / forms

Пример:

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

И

@NgModule({
imports: [
   FormsModule
],
})
30
WapShivam 24 Апр 2019 в 08:06

Я обновился с RC1 до RC5 и получил эту ошибку.

Я завершил свою миграцию (представил новый файл app.module.ts, изменив package.json, чтобы включить новые версии и отсутствующие модули, и, наконец, изменил мой main.ts для загрузки соответственно, основываясь на пример быстрого запуска Angular2).

Я сделал npm update, а затем npm outdated, чтобы подтвердить правильность установленных версий, но все же не повезло.

В итоге я полностью вытер папку node_modules и переустановил с npm install - Вуаля! Задача решена.

6
Rots 24 Авг 2016 в 04:42

Я знаю, что этот вопрос касается Angular 2, но я использую Angular 4, и ни один из этих ответов не помог.

В Angular 4 синтаксис должен быть

[(ngModel)]

Надеюсь это поможет.

17
Matt 4 Авг 2017 в 05:49

Чтобы использовать двустороннюю привязку данных для ввода формы, вам необходимо импортировать пакет FormsModule в ваш модуль Angular. Для получения дополнительной информации см. Angular 2 официальный учебник здесь и официальная документация для форм

522
Srijith 11 Авг 2016 в 11:06

Если после импорта FormsModule вы все еще получаете сообщение об ошибке, проверьте ваш терминал или (консоль Windows), потому что ваш проект не компилируется (из-за другой ошибки, которая может быть чем-либо), и ваше решение не было отражено в вашем браузере!

В моем случае моя консоль имела следующую несвязанную ошибку: Свойство 'retrieveGithubUser' не существует для типа 'ApiService'.

15
mruanova 30 Ноя 2018 в 15:03
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 {}
9
Massimiliano Kraus 14 Ноя 2017 в 09:40

импортировать FormModule app.module

import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })
3
vaibhavkhot 7 Мар 2020 в 05:25

Простое решение: в app.module.ts

Пример 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 { }
44
slartidan 24 Июл 2019 в 05:47

Импортируйте FormsModule в свой модуль приложения.

Это позволит вашему приложению работать хорошо.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,ContactListCopmponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
24
Shashikant Pandit 25 Дек 2016 в 09:43

Для любой версии Angular 2 вам необходимо импортировать FormsModule в ваш файл app.module.ts, и это решит проблему.

2
Siddhartha Thota 3 Авг 2018 в 14:41

Вам необходимо импортировать FormsModule

Откройте app.module.ts

И добавить строку

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

И

@NgModule({
imports: [
   FormsModule
],
})
8
Chirag 22 Апр 2019 в 10:41

Если вам нужно сначала использовать [(ngModel)], вам нужно импортировать FormsModule в app.module.ts, а затем добавить в список импорта. Что-то вроде этого:

< EM> app.module.ts

  1. import import {FormsModule} from "@angular/forms";
  2. добавить в импорт импортирует: [ BrowserModule , FormsModule ] ,

< EM> app.component.ts

  1. Пример: <input type="text" [(ngModel)]="name" >
  2. а затем <h1>your name is: {{name}} </h1>
22
Massimiliano Kraus 14 Ноя 2017 в 09:40