it-roy-ru.com

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

При запуске приложения 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>"): [email protected]: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";
    }
996
Anthony Brenelière

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

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
1451
Anthony Brenelière

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

467
Gabriele Ciech

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

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

angular/packages/forms/src/directives/ng_model.ts

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

194
Alireza

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

Открыть app.module.ts

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

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

а также

@NgModule({
imports: [
   FormsModule
],
})
76
PRao

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

Предполагая, что вы создали новый 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 где-либо еще.

46
Rexford

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

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

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

34
debugmode

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 { }
21
Shashikant Pandit

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

app.module.ts

  1. import 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>
19
iGhost

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

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

Import FormsModule из @ angular/forms

Пример:

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

а также

@NgModule({
imports: [
   FormsModule
],
})
19
WapShivam

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

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

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ], declarations: []})
14
Ved_Code_it

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

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

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

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

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

Simple Soultion: В 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 { }
13
ngCourse

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

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

12
mruanova

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

12
Subham Pasari

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

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

[(ngModel)]

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

12
Matt

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

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }
10
Malindu Sandaruwan

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

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

enter image description here

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

enter image description here

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

    enter image description here

8
Rzv Razvan
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 {}
7
William Pourmajidi

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

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

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

5
Guntram

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

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

5
James Poulose

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

Открыть app.module.ts

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

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

а также

@NgModule({
imports: [
   FormsModule
],
})
5
Chirag

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

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

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

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

4
Rots

Когда я впервые делал урок, 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
Jordan Lapp

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

0
Siddhartha Thota