Блог

Я получаю сообщение об Can't bind to 'ngModel' since it isn't a known property of 'input'. ошибке, хотя я импортировал FormsModule .

package.json:

 "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "^2.0.0",
  

В главном приложении.module:

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
  bootstrap: [App],
  declarations: [
    App
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    HttpModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgaModule,
    PagesModule,
    routing
  ]
  

Вот где я направляюсь к компоненту (pages.routes.ts):

 import { NewProjectModule, BasicForm } from './new-project/new-project.module';
...
{ path: 'new-project', component: BasicForm },
  

Вот модуль компонента:

 import { FormsModule } from '@angular/forms';
...
import { BasicForm } from './basicForm.component';
...
export { BasicForm } from './basicForm.component';

@NgModule({
  imports: [CommonModule, FormsModule, BrowserModule],
  exports: [BasicForm],
  declarations: [BasicForm]
})
export default class NewProjectModule {
}
  

Также импортировал FormsModule в компонент просто для хорошей оценки:

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

@Component({
  selector: 'basic-form',
  template: `
<input type="text" class="form-control" id="directory" placeholder="C:UsersMattDocumentsProjects" [(ngModel)]="project.directory">
  `
})
  

В приведенной выше строке шаблона выдается ошибка.

Я потратил много времени на изучение этого, и я, наконец, понял, что допустил ошибку новичка, не включив компонент, который я создавал, в объявления NgModule

 import { FormsModule } from "@angular/forms"; // <--- import FormsModule 
import { MyModule } from "./components/my-module/my-module.component"; // <--- import your component

@NgModule({
    declarations: [
        AppComponent,
        MyModule // <--- add your component to declarations 
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        NgbModule,
        AppRoutingModule,
        FormsModule // <--- add FormsModule to imports
    ]  

Не могу точно сказать, что это сделало, но я полностью переработал, и проблема решена.

Вместо использования компонента в определении маршрутов я использовал loadChildren:

 { path: 'new-project', loadChildren: () => System.import('./new-project/new-project.module') },
  

который извлекает модуль. В модуле я убедился, что импортировал FormsModule:

 import { FormsModule } from '@angular/forms';
...
@NgModule({
  imports: [CommonModule, NgaModule, FormsModule, routing],
  

И теперь angular находит ngModel для шаблона формы.

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

Поэтому нет необходимости импортировать

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

Я думаю, что ваш синтаксис правильный.

просто попробуйте импортировать приведенный ниже пакет

 import { Component, OnInit } from '@angular/core';
  

Если он все еще не работает, просто измените шаблон следующим образом

 <input type="text" class="form-control" id="directory" [value]="project.directory">
{{project.directory}}
  

Или

 <input type="text"[(ngModel)]="project.directory">
    {{project.directory}}
  

Если у него все еще есть ошибка, ваша проблема связана с ‘project.directory’ или каким-либо другим свойством ‘input.

Пройдите через это https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html для получения подробной информации о ngModel.