Угловая ошибка: "Невозможно связать с" ngModel ", так как это не известное свойство" ввода ""

Ответ 1

Чтобы использовать двустороннюю привязку данных для ввода формы, вам необходимо импортировать пакет FormsModule в свой angular модуль.

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

@NgModule({
    imports: [
         FormsModule      
    ]

EDIT

Поскольку существует много повторяющихся вопросов с одной и той же проблемой, я расширяю этот ответ.

Есть две возможные причины

• Отсутствует FormsModule, поэтому добавьте это в свой модуль,

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

• Проверьте синтаксис/правописание [(ngModel)] во входном теге

Ответ 2

Это правильный ответ. вам нужно импортировать 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();
  }));

С наилучшими пожеланиями и надеждой будет полезно

Ответ 3

Я столкнулся с этой ошибкой при тестировании моего приложения Angular 6 с помощью Karma/Jasmine. Я уже импортировал FormsModule в мой модуль верхнего уровня. Но когда я добавил новый компонент, который использовал [(ngModel)] мои тесты начали проваливаться. В этом случае мне нужно было импортировать FormsModule в мой TestBed TestingModule.

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

Ответ 4

Ваш ngModel не работает, потому что он еще не является частью вашего NgModule.

Вы должны сказать NgModule, что вы имеете право использовать ngModel в течение вашего приложения, вы можете сделать это, добавив FormsModule в свой app.module.ts → imports → [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

Ответ 5

В app.module.ts добавьте это:

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

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

Ответ 6

Все вышеперечисленные решения проблемы являются правильными. Но если вы используете FormsModule загрузку, FormsModule необходимо импортировать в дочерний модуль, в котором есть формы. Добавление его в app.module.ts не поможет.

Ответ 7

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

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

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

Если в приложении установлено несколько модулей, необходимо импортировать FormsModule в каждый соответствующий модуль.

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

Удачи!!

Ответ 8

Попробуйте добавить

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

Код такой же, как указано выше

Ответ 9

Обновление с 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
  ...
})

Простая демонстрация, чтобы доказать это.

Ответ 10

модуль формы импорта в 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">

Ответ 11

Я перепробовал все, что упомянуто выше, но все равно это не работает.

но в конце концов я обнаружил проблему на сайте Angular. Попробуйте импортировать formModule в module.ts вот и все.

Ответ 12

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

BrowserModule, FormsModule//<<<< и здесь

Поэтому просто app.module.ts или другой файл модуля и убедитесь, что FormsModule импортирован в...

Ответ 13

В Angular 6 я получаю ту же ошибку. "Невозможно связать с" ngModel ", так как оно не является известным свойством" ввода "". Выполнены все вышеупомянутые операции импорта, но это не решается.

Ответ 14

В моем случае я добавил отсутствующий импорт, который был ReactiveFormsModule.

Ответ 15

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

в app.module.ts добавьте следующие строки:

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

[...]

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

Ответ 16

ngModel для меня было неправильное написание ngModel. Я написал это так: ngModule а должен быть ngModel.

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

Ответ 17

сначала импортируйте FormsModule, а затем используйте ngModel в ваших component.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML-код:

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

Ответ 18

Вам нужно добавить эти импорты:

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

Ответ 19

Я также сталкиваюсь с этой же проблемой, я импортировал FormsModule в app.module.ts, тогда он также не работал

Решение:

Предположим, у вас есть несколько модулей, и в каждом из них вам нужно будет импортировать FormsModule.

Ответ 20

Ответ таков:

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

@ngModule({
   imports:[FormsModule];

})