Кутова помилка: "Неможливо прив’язати до" ngModel ", оскільки це не відома властивість" введення ""

Я використовую Angular 4 і отримую помилку в консолі:

Неможливо прив’язати до 'ngModel', оскільки це не відома властивість 'input'

Як я можу це вирішити?

Для використання двостороннього прив'язки даних для введення форми вам потрібно імпортувати FormsModuleпакет у вашому модулі Angular.

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

@NgModule({
    imports: [
         FormsModule      
    ]

EDIT

Оскільки є багато повторюваних питань з тією ж проблемою, я посилюю цю відповідь.

Можливі дві причини

• Відсутнє FormsModule, отже, додайте це до свого модуля,

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
      imports: [
          FormsModule      
      ]
  

• Перевірте синтаксис / написання [(ngModel)]у вхідному тезі

Це правильна відповідь. вам потрібно імпортувати FormsMoudle

спочатку в app.module.ts

**

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule  } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule ,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

** другий у app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

З найкращими побажаннями та сподіваннями буде корисним

Ви ngModelне працюєте, оскільки це ще не є вашою частиною NgModule.

Ви повинні сказати, NgModuleщо у вас є повноваження використовувати ngModelпротягом усього додатка. Ви можете це зробити, додавши FormsModuleу свій app.module.ts-> imports-> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

Я зіткнувся з цією помилкою під час тестування мого додатка Angular 6 за допомогою Karma / Jasmine. Я вже імпортував FormsModuleу своєму модулі верхнього рівня. Але коли я додав новий компонент, який використовував [(ngModel)]мої тести, почав виходити з ладу. У цьому випадку мені потрібно було імпортувати FormsModuleв своєму TestBed TestingModule.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));

В app.module.tsдодати наступне:

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

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

Усі вищезазначені рішення проблеми є правильними. Але якщо ви використовуєте ледаче завантаження, FormsModuleйого потрібно імпортувати в дочірній модуль, у якому є форми. Додавання до нього app.module.tsне допоможе.

Я спробував усе те, про що було сказано вище, але все одно не працює.

але нарешті я знайшов проблему в Angular site.Try to import formModule in module.ts thats it.

Спробуйте додати

ngModel на рівні модуля

Код такий же, як і вище

Оновіть програму Angular 7.xx , зіткнетесь з тією ж проблемою в одному з моїх модулів .

Якщо він лежить у вашому незалежному модулі, додайте ці додаткові модулі:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

Якщо він лежить у вашому app.module.ts, додайте ці модулі:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

Проста демонстрація доказу.

Відповідь для мене було неправильним написанням ngModel. У мене було написано так: ngModuleпоки так і має бути ngModel.

Усі інші спроби явно не змогли вирішити помилку для мене.

import { FormsModule } from '@angular/forms'; // <<<< імпортуйте його сюди

BrowserModule, FormsModule // <<<< і тут

Тому просто шукайте app.module.tsабо інший файл модуля і переконайтесь, що ви FormsModuleімпортували в ...

У моєму випадку я додав відсутній імпорт, який був ReactiveFormsModule.

модуль імпорту форми в app.module.ts.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

У HTML:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

У моєму випадку я неправильно написав, я мав на увазі як ngmodel istead ng M odel :) Сподіваюся, це допомагає!

Очікувано - [(ngModel)] Фактичний - [(ngmodel)]

Вам слід перевірити наступні речі, якщо двостороння прив'язка не працює.

У html ngModel має бути названий таким чином. Немає залежності від іншого атрибута вхідного елемента

<input [(ngModel)]="inputText">

Переконайтеся, що FormsModule імпортується у файл модулів app.modules.ts

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // suppose, this is the component in which you are trying to use two ay binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Переконайтеся, що компонент, у якому ви намагаєтеся використовувати ngModel для двостороннього прив'язки, доданий у декларації. Код додано в попередньому пункті №2

Це все, що вам потрібно зробити, щоб зробити двосторонню прив'язку за допомогою ngModel роботи, це перевірено до кутового 9

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

у app.module.ts додайте рядки нижче:

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

[...]

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

спочатку імпортуйте FormsModule, а потім використовуйте ngModel у своєму компоненті.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML-код:

<input type='text' [(ngModel)] ="usertext" />

Якщо навіть після імпорту модуля форм проблема не зникає, перевірте, чи немає в атрибуті Input атрибута "name" зі значенням, рівним іншому вводу на сторінці.