Решение проблемы с привязкой к ‘ngModel’ в Angular

Одной из распространенных проблем, с которой могут столкнуться начинающие разработчики на JavaScript и Angular, является ошибка «Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'». Эта ошибка обычно возникает, когда пытаются использовать двустороннюю привязку данных с помощью директивы [(ngModel)] на элементе input в компоненте Angular.

<input type="text" [(ngModel)]="example" placeholder="example" />

Здесь example — это свойство компонента, к которому мы пытаемся привязать значение input. При попытке запустить приложение с этим кодом, возникает вышеупомянутая ошибка.

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-example’,
templateUrl: ‘./example.component.html’,
})
export class ExampleComponent {
public example : string = «example»;
}

Эта ошибка возникает из-за того, что модуль FormsModule, который содержит директиву ngModel, не был импортирован в модуль, где используется этот компонент.

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

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { FormsModule } from ‘@angular/forms’; // Добавить эту строку

import { AppComponent } from ‘./app.component’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule // И эту строку
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

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