Can't bind to ngModel because it is not being recognized

Question

I am trying to create a simple form by following this tutorial but i am getting following error:

Can't bind to 'ngModel' since it isn't a known property of 'input'.

this is my html HomeComponent:

Pokemon Name: <input type="text" [(ngModel)]="pkname">
<button mt-raised-button>Search</button>

this is my views module

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { FormsModule } from '@angular/forms'
import { HomeComponent } from 'src/app/views/home/home.component'

@NgModule({
    imports: [CommonModule,FormsModule],
    exports: [HomeComponent],
    declarations: [HomeComponent]
  })
  export class ViewModule {}

I've also imported FormsModule in my app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http'
import { FormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Does this answer your question? [Can't bind to 'ngModel' since it isn't a known property of 'input'](https://stackoverflow.com/questions/38892771/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input) — PierreD, Jan 14 '20 at 14:19
Everything looks good. Can you just cancel the current running instance using CTRL+C and re-run it ? — Jameer Khan, Jan 14 '20 at 14:34
You should get an error "cannot import in 2 modules" so it's impossible you have imported FormsModule in both app and view module — PierreD, Jan 14 '20 at 14:40
@Angular nope, of course you can import the same module into 2 modules. [Here's](https://angular-ylsxou.stackblitz.io) a quick reproduction of your code and it works fine. — ViqMontana, Jan 14 '20 at 14:43
@Angular I can upload the entire code if you want. i am new to angular, in fact i started it yesterday so there's probably something i am doing wrong here. — Otorrinolaringologista -man, Jan 14 '20 at 14:49
It all looks good, could you upload the .ts file where you are binding the value too as well please. — ajrthegreat, Jan 14 '20 at 14:52

score 1 · Accepted Answer · answered Jan 14 '20 at 14:53

1

Import ViewModule into AppModule

Your app.module should look something like-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http'
import { FormsModule } from '@angular/forms'

import { ViewModule } from "./viewmodule.module";   // your file path

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ViewModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

answered Jan 14 '20 at 14:53

Jameer Khan

373
2
10

the error now changed to this: Type HomeComponent is part of the declarations of 2 modules: AppRoutingModule and ViewModule! Please consider moving HomeComponent to a higher module that imports AppRoutingModule and ViewModule. You can also create a new NgModule that exports and includes HomeComponent then import that NgModule in AppRoutingModule and ViewModule. – Otorrinolaringologista -man Jan 14 '20 at 14:57
Ok, remove `HomeComponent` from `AppRoutingModule` and try – Jameer Khan Jan 14 '20 at 14:58
1

it still is on app-routing, i just removed the declarations and entryComponents and now everything is working. thanks mate. – Otorrinolaringologista -man Jan 14 '20 at 15:01

Can't bind to ngModel because it is not being recognized

1 Answers1