Angular 4 "Cannot bind to 'ngModel' because it is not a known property of 'input'."
This seems to be a popular problem, but still the solutions suggesting to import FormsModule and it does it.
Mistake:
Cannot bind to 'ngModel' as this is not a known property of 'input'. ("
<label for="city">City</label>
<input type="text" id="city" [ERROR ->][(ngModel)]="chosenCity">
<input type="button" value="Get Weather" (click)="getWeather(chosenCity)" "):
This is followed by the template and component code:
import { Component } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'weather',
templateUrl: './weather.component.html'
})
export class WeatherComponent {
public weather: Weather;
constructor( private http: Http) {
}
public getWeather(chosenCity: string): void {
this.http.get('/api/weather/city/' + chosenCity).subscribe(result => {
this.weather = result.json();
});
}
}
interface Weather {
temp: string;
summary: string;
city: string;
}
<h1>Weather check</h1>
<label for="city">City</label>
<input type="text" id="city" [(ngModel)]="chosenCity">
<input type="button" value="Get Weather" (click)="getWeather(chosenCity)" />
<div *ngIf="weather">
<h3>Weather for {{weather.city}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Temp</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{weather.temp}}</td>
<td>{{weather.summary}}</td>
</tr>
</tbody>
</table>
</div>
The .module.shared.ts application follows:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { HelloWorldComponent } from './components/helloworld/helloworld.component';
import { WeatherComponent } from './components/weather/weather.component';
export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
HelloWorldComponent,
WeatherComponent
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'hello', component: HelloWorldComponent },
{ path: 'weather', component: WeatherComponent },
{ path: '**', redirectTo: 'home' }
])
]
};
And the app.module.client.ts file follows:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
BrowserModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
...sharedConfig.imports
],
providers: [
{ provide: 'ORIGIN_URL', useValue: location.origin }
]
})
export class AppModule {
}
If someone can point me to what I am doing wrong, I will be greatly obliged, but every article I find indicates that the problem can be solved by importing the FormsModule.
+3
source to share
1 answer
you need to add FormsModule, ReactiveFormsModule
toapp.module.shared.ts
your app.module.shared.ts should look like.
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { HelloWorldComponent } from './components/helloworld/helloworld.component';
import { WeatherComponent } from './components/weather/weather.component';
export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
HelloWorldComponent,
WeatherComponent
],
imports: [
FormsModule,
ReactiveFormsModule
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'hello', component: HelloWorldComponent },
{ path: 'weather', component: WeatherComponent },
{ path: '**', redirectTo: 'home' }
])
]
};
+6
source to share