Неможливо прив’язати до '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>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

Я дивлюся на плункер Hero, але я не бачу різниці у своєму коді.

Ось файл компонентів:

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";
}

Так, я просто додав у app.module.ts:

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

[...]

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

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

Для використання [(ngModel)]у Angular 2 , 4 і 5+ вам потрібно імпортувати FormsModule з кутової форми ...

Також він знаходиться на цьому шляху під формами у Angular repo in github :

angular / пакети / форми / 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 в кутовому розділі тут

Вам потрібно імпортувати FormsModule

Відкрийте app.module.ts

і додайте рядок

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

і

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

Кидання в це може комусь допомогти.

Припускаючи , що ви створили новий 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ніде.

Проста душа: у 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 { }

Імпортуйте FormsModule в ті модулі, де ви хочете використовувати [(ngModel)]

Щоб позбутися цієї помилки, потрібно виконати два кроки

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

Сподіваюся, це допомагає

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

Будь ласка, відкрийте app.module.ts

Імпорт FormsModule з @ angular / форм

Наприклад:

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

і

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

Я використовую Angular 7

Мені потрібно імпортувати ReactiveFormsModule, оскільки я використовую клас FormBuilder для створення реактивної форми.

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

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

імпортувати 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і потім додати в список імпорту. Щось на зразок цього:

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>

ngModel є частиною FormsModule. І його слід імпортувати з @ angular / форм для роботи з ngModel.

Будь ласка, змініть app.module.ts так:

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

[...]

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

Якщо хтось все-таки отримує помилки після застосування прийнятого рішення, це може бути, тому що у вас є окремий файл модуля для компонента, в якому ви хочете використовувати властивість ngModel у тезі введення. У цьому випадку застосуйте прийняте рішення також у файлі module.ts компонента.

Я використовую Angular 5.

У моєму випадку мені також потрібно було імпортувати RactiveFormsModule.

app.module.ts (або anymodule.module.ts)

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

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

Я знаю, що це питання стосується кута 2, але я на Angular 4, і жодна з цих відповідей не допомогла.

У Angular 4 синтаксис повинен бути

[(ngModel)]

Сподіваюсь, це допомагає.

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

У моєму випадку моя консоль мала таку непов’язану помилку: Властивість 'retrieveGithubUser' не існує для типу 'ApiService'.

У модулі, який ви бажаєте використовувати ngModel, вам доведеться імпортувати FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModel походить від FormsModule. Існують деякі випадки, коли ви можете отримати таку помилку:

1. Ви не імпортували FormsModule в масив імпорту модуля, де оголошено ваш компонент, компонент, в якому використовується ngModel.
2. Ви імпортуєте FormsModule в один модуль, який успадковується іншим модулем. У цьому випадку у вас є два варіанти:
   • нехай імпортується FormsModule в масив імпорту з обох модулів: module1 та module2. Як правило: Імпорт модуля НЕ забезпечує доступ до імпортних модулів. (Імпорт не успадковується)

• оголосити FormsModule в масиви імпорту та експорту в модулі1 придатним, щоб побачити його також у моделі2

3. (У деякій версії я зіткнувся з цією проблемою) Ви правильно імпортували FormsModule, але проблема полягає у вхідному HTML-тезі. Ви повинні додати атрибут тегу імені для введення, а ім'я пов'язаного з об'єктом у [(ngModel)] має бути таким же, як ім'я в атрибуті імені

   

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

імпортуйте FormModule в додаток.модуль

import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] 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 {}

Іноді ви отримуєте цю помилку, коли намагаєтесь використовувати компонент з модуля, який не є спільним, в іншому модулі.

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

Якщо це відбувається, ви хочете поділитися модулем1.componentA, щоб бути доступним в інших модулях. Отже, якщо ви поділите module1.componentA всередині sharedModule, модуль1.componentA буде доступний для інших модулів (поза модулем1), і кожен модуль, який імпортує спільний модуль, зможе отримати доступ до селектора у своїх шаблонах, вводячи @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 { }

Вам потрібно імпортувати FormsModule

Відкрийте app.module.ts

і додайте рядок

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

і

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

Іноді , якщо ми вже імпортували 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 {}

Сподіваюся, це комусь допоможе .. :)

Це для людей, які використовують звичайний 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],

Щасливого кодування!

Я перейшов з RC1 на RC5 і отримав цю помилку.

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

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

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

Коли я вперше робив підручник, 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);

додати код до app.module.ts Він працював на мене:

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

[...]

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