Не удается привязаться к "ngModel", так как это не является известным свойством "input"

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

использовать [(ngModel)] на Угловое 2, 4 & 5+, вам нужно импортировать FormsModule из угловой формы...

также он находится в этом пути под формами в угловом РЕПО в github:

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

наверное, это не очень приятно для разработчики AngularJs как ты мог использоватьng-model везде в любое время раньше, но как Angular пытается отделить модули, чтобы использовать все, что вы хотите использовать, ngModel находится в FormsModule сейчас.

также, если вы используете ReactiveFormsModule, необходимо импортировать его тоже.

так просто ищет app.модуль.ТС и 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 в угловую секцию здесь

бросать это может помочь кому-то.

предполагая, что вы создали новый NgModule, скажем AuthModule посвященный обработке ваших потребностей Auth, убедитесь, что импортировать 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 где-либо еще.

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

1. импорт FormsModule в вашем модуле приложения
2. передайте его как значение импорта в @ ngmodule decorator

в основном приложении.модуль.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 { }

надеюсь, что это помогает

импорт 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 { }

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

app.модуль.ТС

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

app.деталь.ТС

1. пример: <input type="text" [(ngModel)]="name" >
2. а то <h1>your name is: {{name}} </h1>

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

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

[(ngModel)]

надеюсь, что это помогает.

Простой Soultion : в приложение.модуль.ТС

***Example 1***
import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

Пример 2 :

Если вы хотите использовать [(ngModel)], то вам нужно импортировать FormsModule в приложении.модуль.ТС

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

Я использую угловой 5.

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

app.модуль.ts (или anymodule.модуль.ts)

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

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

открыть app.модуль.ТС

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

импорт { FormsModule } из '@angular / forms';

и @NgModule({ импортозамещающий: [ FormsModule ], })

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

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

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

Это для людей, которые используют простой JavaScript вместо скрипта типа. В дополнение к ссылке на файл скрипта формы в верхней части страницы, как показано ниже

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

вы также должны сказать загрузчику модуля, чтобы загрузить ng.forms.FormsModule. После внесения изменений my imports собственность NgModule метод выглядел как ниже

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

удачи в кодировании!

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

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

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

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

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

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

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

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

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

в модуле вы готовы использовать ngModel вы должны импортировать FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

для любой версии Angular 2 вам необходимо импортировать FormsModule в приложение.модуль.TS файл, и он исправит проблему.