Невозможно связать с 'ngModel', так как это не известное свойство 'input'

1379

Я получил следующую ошибку при запуске моего приложения 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";
}
Энтони Бренельер
источник
11
Что такое герой срыватель?
IronAces
3
У меня та же проблема, так как они обновили вчера до rc5 (интересно, это работает для моего коллеги ..) Я думаю, что @abreneliere рассказывает о своих уроках - angular.io/docs/ts/latest/tutorial
PetLahev
4
@DanielShillcock, Турнир героев .
Марк Райкок
2
Да, я ссылался на учебник Tour of Heroes, потому что он использует ngModel.
Энтони Бренельер
5
Я просто смотрю на Angular и вижу эту ошибку, когда делаю учебник Tour of Heroes. Конечно же, теперь они вызывают это в следующей строке и говорят вам, как / почему это исправить.
Мэтт Пеннер

Ответы:

1925

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

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
Энтони Бренельер
источник
14
На самом деле, я предпочитаю этот ответ Габриэле (это просто ссылка). Здесь точный код представлен. Досадно, что я столкнулся с этой проблемой сразу же после «Введение в Angular 2» Джона Папса на PluralSight, и эта проблема даже не упоминалась. Для них двусторонняя привязка просто сработала.
Майк Гледхилл,
20
Это сработало, но только после того, как я импортировал его в свой подмодуль. Новичкам не совсем понятно, что это не наследуется субмодулями.
adam0101
3
В моем случае, использование брекетов было неверным. Я использовал [{ngModel}]вместо правильного:[(ngModel)]
Imtiaz
29
Для тех, кто обнаружит это из-за схожего сбоя с Jasmine, вам нужно будет также добавить этот импорт в component.spec.tsфайл.
TheMayer
3
И для того, где это поместить (относительно ошибки Жасмина): stackoverflow.com/questions/39584534/…
bagsmode
534

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

Габриэле Цех
источник
9
Я должен признать, что я начал с Angular в понедельник (так 4 дня назад) и делал их уроки, так что я почти уверен, что сделал что-то не так, но импорт FormsModule для меня не сработал. Затем я добавил import { FORM_DIRECTIVES } from '@angular/forms';и добавил FORM_DIRECTIVESк директивам, и да, моя привязка снова работает (чтобы было ясно, что она работала до выхода rc5)
PetLahev
2
Который , кажется, связано с этим stackoverflow.com/questions/31623879/...
PetLahev
1
@PetLahev Проблема, с которой вы столкнулись при работе с учебником, заключается в том, что 7 августа, когда вы начинали, учебники работали с Release Candidate 4. С 8 августа они работают над Release Candidate 5 с другим синтаксисом
AJ Zane
5
FORM_DIRECTIVESна всякий случай мертвы
Инструментарий
6
Ничего не стоит, что, если вы используете SharedModule, вам также может понадобиться импортировать FormsModule.
Разница
243

Для использования [(ngModel)]в Angular 2 , 4 и 5+ Вам необходимо импортировать FormsModule из формы Angular ...

Также в этом пути под формами в Angular Repo в GitHub :

угловой / пакеты / формы / src / директивы / ng_model.ts

Вероятно , это не очень приятно для разработчиков AngularJs , как вы могли бы использовать нг-модель везде в любое время до, но , как 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 { }

Также это текущие начальные комментарии для Angular4 ngModelв FormsModule :

/**
 * `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}"

Для получения дополнительной информации, посмотрите на ng_model в разделе Angular здесь

Алиреза
источник
95

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

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

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

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

а также

@NgModule({
imports: [
   FormsModule
],
})
Prao
источник
55

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

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

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

KhoPhi
источник
Мне нужно было это в подмодуле, где я использовал функции формы. Выше иерархии было недостаточно.
Зарепет
45

Простое Soultion: в 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 { }
Шашват Гупта
источник
28
Где именно разница в двух примерах?
Филипп Мейснер
в моем случае пришлось импортировать FormsModule на мой component.module.ts
ISFO
40

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

введите описание изображения здесь

Arul
источник
39

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

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

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

Режим отладки
источник
Спасибо! Я не объявил об этом в разделе импорта, и это сводило меня с ума, когда я перемещал компонент в подмодуль.
Ричард
30

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

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

Импортировать FormsModule из @ angular / forms

Пример:

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

а также

@NgModule({
imports: [
   FormsModule
],
})
WapShivam
источник
28

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

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

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ], declarations: []})
Ved_Code_it
источник
24

импортировать 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 { }
Шашикант Пандит
источник
22

Если вам нужно использовать [(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>
iGhost
источник
19

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

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

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
Ананд Раджа
источник
18

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

Субхам Пасари
источник
18

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

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

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

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
renatohlf
источник
ReactiveFormsModuleтребуется, когда вам нужно FormGroup, FormControl ,Validatorsи т. д. Для использования ngModelвам не требуется ReactiveFormsModule.
Амит Чигадани
@AmitChigadani Добавление ReactiveFormModule - единственное, что позволило устранить ошибку в моем случае. Я использую Угловая 7.
Eternal21
17

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

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

[(ngModel)]

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

Matt
источник
15

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

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

mruanova
источник
13

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

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }
Малинду Сандаруван
источник
Мне не хватало этого в моем app.module.ts, спасибо, Малинду!
Омциг
11

ngModel исходит от FormsModule. В некоторых случаях вы можете получить этот вид ошибки:

  1. Вы не импортировали FormsModule в массив импорта модуля, где объявлен ваш компонент, компонент, в котором используется ngModel.
  2. Вы импортировали FormsModule в один модуль, который унаследован от другого модуля. В этом случае у вас есть два варианта:
    • пусть FormsModule импортируется в массив импорта из обоих модулей: module1 и module2. Как правило: импорт модуля НЕ обеспечивает доступ к его импортированным модулям (импорт не наследуется)

введите описание изображения здесь

  • объявите FormsModule в массивах import и export в module1, чтобы его можно было увидеть и в model2

введите описание изображения здесь

  1. (В какой-то версии я столкнулся с этой проблемой) Вы правильно импортировали FormsModule, но проблема заключается во входном HTML-теге. Вы должны добавить атрибут тега name для ввода, и имя привязанного объекта в [(ngModel)] должно совпадать с именем в атрибуте name

    введите описание изображения здесь

Рзв Разван
источник
11

В 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 { }
thevinaychoudhary
источник
10

импорт FormModule app.module

import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })
vaibhavkhot
источник
9
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 {}
Уильям Пурмаджиди
источник
8

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

Например, у вас есть 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, сможет получить доступ к селектору в своих шаблонах, вставляя @Input()объявленную переменную.

Guntram
источник
1
У меня есть именно эта проблема, и вы говорите, вы должны поделиться модулем, чтобы вы могли использовать компонент A в ComponentC. Но .. Как мне поделиться модулем1? Какой синтаксис для «совместного использования модуля»? Я догадался, что экспортировать module1, а затем импортировать его в module2 было достаточно для совместного использования, но проблема все еще остается
Agorilla
2
Так себе ответить, это то , как вы разделяете модуль angular-2-training-book.rangle.io/handout/modules/...
Agorilla
2
Привет, извините, я не видел ваш комментарий так быстро :) Да, именно так вы можете создать SharedModule и импортировать туда свои собственные модули, которые вы хотите использовать в нескольких других модулях. Затем вы импортируете SharedModule, где вы хотите использовать модуль, который импортируется в общий.
Гунтрам
8

Для моего сценария мне пришлось импортировать оба [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

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

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

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

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

а также

@NgModule({
imports: [
   FormsModule
],
})
Чираг
источник
8

Иногда , если мы уже импортировали 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 {}

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

ganesh045
источник
7

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

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

Джеймс Полус
источник
6

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

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

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

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

Rots
источник
5

Когда я впервые делал урок, 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);
Джордан Лапп
источник
4

добавить код в app.module.ts, он работал для меня:

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

[...]

@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
V_for_Vj
источник