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

801

У меня возникла следующая ошибка при запуске моего приложения "Угловое", даже если компонент не отображается.

Я должен прокомментировать, чтобы мое приложение работало.

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";
}
  • 6
    Что такое герой срыватель?
  • 3
    У меня та же проблема, так как они обновили вчера до rc5 (интересно, это работает для моего коллеги ..) Я думаю, что @abreneliere говорит об их учебниках - angular.io/docs/ts/latest/tutorial
Показать ещё 5 комментариев
Теги:
angular
input

23 ответа

1229
Лучший ответ

Да, что это, в app.module.ts, я просто добавил:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
  • 12
    На самом деле, я предпочитаю этот ответ Габриэле (это просто ссылка). Здесь точный код представлен. Досадно, что я столкнулся с этой проблемой сразу же после «Введение в Angular 2» Джона Папса на PluralSight, и эта проблема даже не упоминалась. Для них двусторонняя привязка просто сработала.
  • 10
    Это сработало, но только после того, как я импортировал его в свой подмодуль. Начинающим не совсем понятно, что это не наследуется субмодулями.
Показать ещё 3 комментария
457

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

  • 8
    Я должен признать, что я начал с Angular в понедельник (так 4 дня назад) и делал их уроки, так что я уверен, что сделал что-то не так, но импорт FormsModule для меня не сработал. Затем я добавил import { FORM_DIRECTIVES } from '@angular/forms'; и добавил FORM_DIRECTIVES в директивы, и да, моя привязка снова работает (чтобы было ясно, что она работала до выпуска rc5)
  • 1
    Что, похоже, связано с этим stackoverflow.com/questions/31623879/…
Показать ещё 4 комментария
179

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

Также он находится на этом пути под формами в Angular repo в github:

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

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

[ngModelOptions]="{standalone: true}"

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

46

В этом может помочь кто-то.

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

Если вы используете 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 где-либо еще.

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

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

Откройте приложение app.module.ts

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

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

а также

@NgModule({
imports: [
   FormsModule
],
})
  • 1
    Это сработало отлично, только что протестировано на Angular 6 на сгенерированном CLI проекте
34

Для устранения этой ошибки необходимо выполнить два шага

  • импортировать FormsModule в ваш модуль приложения
  • Передайте его как значение импорта в декодере @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 { }

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

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

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

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

app.module.ts

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

app.component.ts

  • Пример: <input type="text" [(ngModel)]="name" >
  • а затем <h1>your name is: {{name}} </h1>
12

Простая сущность: В app.module.ts

***Example 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 { }
  • 17
    Где именно разница в двух примерах?
12

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

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

[(ngModel)]

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

11

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

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

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

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  • 1
    Только этот ответ решил проблему в Angular 5
  • 0
    ReactiveFormsModule требуется, когда вам нужны FormGroup, FormControl ,Validators и т. Д. Для использования ngModel вам не требуется ReactiveFormsModule .
11

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

9

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

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

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

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

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

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

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

  • 1
    У меня есть именно эта проблема, и вы говорите, вы должны поделиться модулем, чтобы вы могли использовать компонент A в ComponentC. Но .. Как мне поделиться module1? Какой синтаксис для «совместного использования модуля»? Я догадался, что экспортировать module1, а затем импортировать его в module2 достаточно, но проблема все еще остается
  • 2
    Таким образом, чтобы ответить на себя, это то, как вы делитесь модулем angular-2-training-book.rangle.io/handout/modules/…
Показать ещё 1 комментарий
4

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

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }
4

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

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

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

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

Счастливое кодирование!

3

ngModel исходит из FormsModule. Есть некоторые случаи, когда вы можете получить такую ошибку:

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

Изображение 2205

  • объявить FormsModule в массивы импорта и экспорта в модуле 1, чтобы они могли увидеть его в модели 2 также

Изображение 2206

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

    Изображение 2207

3

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

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

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

В итоге я полностью уничтожил папку node_modules и переустановил с помощью npm install - Voila! Проблема решена.

3

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

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

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

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню