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

296

Я использую Angular 4 и получаю сообщение об ошибке в консоли:

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

Как я могу решить это?

Виджай Кумар
источник
28
Вам нужно добавить FormsModuleв imports: []модуль , в котором вы используете ngModel. В противном случае опубликовать свой код.
Гюнтер Цохбауэр
9
Я не могу думать, что все новые разработчики Angular 2 & 4 решат эту проблему (включая меня). Когда в последний раз вы использовали Angular и не хотели где-нибудь использовать ngModel? Я не понимаю, почему FormsModule не включен по умолчанию ...
Майк Гледхилл,
Во всяком случае, я столкнулся с этой ошибкой в ​​IONIC-4 (4.11.0) при работе с проверкой форм. Если я ничего не делаю, кроме добавления formControlName = "myControl" к любому <ion-input> в любом месте формы, я получаю сообщение об ошибке привязки ngModel. Альтернативные свойства, такие как formControlName1 = "myControl", не вызывают эту ошибку.
Memetican

Ответы:

675

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

РЕДАКТИРОВАТЬ

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

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

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

    import { FormsModule } from '@angular/forms';
    
    @NgModule({
        imports: [
            FormsModule      
        ]
  • Проверьте синтаксис / правописание [(ngModel)]во входном теге

Sajeetharan
источник
27
Какова связь между ngModel и FormsModule? Однако это не работает для меня.
Говинд
4
FormsModule предоставляет дополнительные директивы для элементов формы, включая ввод, выбор и т. Д. Вот почему это необходимо. Не забудьте импортировать FormsModule в тот же модуль, который объявляет ваши компоненты, содержащие привязки элементов формы.
Боб
1
Что нам делать, если мы используем это в файле ts компонента?
Майк Уоррен
1
Вы не должны импортировать в component.ts
Sajeetharan
@Sajeetharan, что если в моем компоненте есть шаблон, использующий ng-модель в каком-либо элементе формы?
CJBrew
18

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

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

Атем
источник
Нужен ли второй шаг, изменение app.component.ts ?
Конрад Вилтерстен
9

Вы ngModelне работаете, потому что это еще не ваша часть NgModule.

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

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })
Шубхам Верма
источник
7

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

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));
Билл
источник
5

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

Ramya
источник
4

В app.module.tsдобавление это:

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

@NgModule({
    declarations: [AppComponent],
    imports: [FormsModule],
})
ДУРГЕШ ЧУРАСИЯ
источник
6
Какую дополнительную ценность этот ответ добавляет к существующим ответам?
Гюнтер Цохбауэр
4
не добавляет никакого значения к ответу, и формат кода неправильный. Путать для начинающего.
ssmsnet
3
Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код.
Клийстерс
3

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

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

Арпит Шарма
источник
2

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

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

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

Thoopalliamar
источник
2

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

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

Hearen
источник
2

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

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

Dyary
источник
Да, это случилось и со мной ... Модель! = Модуль Почему это не входит в мой мозг!
Рахул Сонванши
1

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

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

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

Маной Гохель
источник
1

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

S34N
источник
1

модуль формы импорта в 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">
Брахмесвара Рао Палепу
источник
Я использовал форму в html и импортировал модуль форм в app.madule.ts like-import {FormsModule} из '@ angular / forms', и добавил этот FormsModule в импорт.
Браммесвара Рао Палепу
1

В моем случае я ошибся, я имел в виду ngmodel вместо n o M odel :) Надеюсь, это помогает!

Ожидаемый - [(ngModel)] Фактический - [(ngmodel)]

pragapraga
источник
1

Вы должны проверить следующие вещи, если двусторонняя привязка не работает.

В html ngModel должен называться так. Нет зависимости от другого атрибута элемента ввода

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

Make Sure 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

Авинаш
источник
0

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

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

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
Swapnil G Thaware
источник
0

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

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML-код:

<input type='text' [(ngModel)] ="usertext" />
Шакти Шривастав
источник
0

Если даже после импорта модуля формы проблема не устранена, убедитесь, что ваш входной элемент не имеет атрибута «name» со значением, равным другому входному значению на странице.

Лукас Симоес
источник