Reputation: 4038
I've read all the posts, and the solution to: “Can't bind to 'ngModel' since it isn't a known property of 'input'”
seems to be to add FormsModule to imports and the imports array in app.module.ts
(I only have one module in the application . . . app.module.ts
). But I've tried this, as well as multiple permutations including importing these to git-search-component.spec.ts, and importing ReactiveFormsModule, etc. but nothing works and I still get the "can't bind to ngModel . . ."
error in my console. Any additional ideas?
app.module.ts
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GitSearchService } from './git-search.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [GitSearchService],
bootstrap: [AppComponent]
})
export class AppModule { }
git-search.component.html
<input name="query" placeholder="Enter Search Here" [(ngModel)]="qryString"/>
<button (click)="gitSearch()">Submit</button>
<div *ngIf="searchResults; else doElse">
<h3 class="total">Total Results: {{searchResults.total_count}}</h3>
<ul class="list">
<li [ngStyle] = "{'background-color' : (i % 2 === 0) ? 'white' : 'silver' }" class="list_item" *ngFor = "let result of searchResults.items; index as i;">
<a [href]="result.html_url">
<img [src]="result.owner.avatar_url" class="avatar"/>
<h4 class="title">
{{result.name}}
<small>by {{result.owner.login | uppercase}}</small>
</h4>
</a>
<p class="description">
{{result.description}}
</p>
<p>Created on: {{result.created_at | date:'fullDate'}}</p>
</li>
</ul>
</div>
<ng-template #doElse>Loading . . . </ng-template>
git-search.component.ts
import { Component, OnInit } from '@angular/core';
import { GitSearch, GitUsers } from '../git-search';
import { GitSearchService } from '../git-search.service';
@Component({
selector: 'app-git-search',
templateUrl: './git-search.component.html',
styleUrls: ['./git-search.component.scss']
})
export class GitSearchComponent implements OnInit {
searchResults: GitSearch;
qryString: string;
constructor(private gsService: GitSearchService) { }
gitSearch = () => {
this.gsService.gitSearch(this.qryString).then( (response) =>
this.searchResults = response,
(error) =>
alert("Error: " + error.statusText));
}
}
Upvotes: 0
Views: 2763
Reputation: 159
when you add components through angular commands then components will be registered automatically in their respective modules
as mentioned by @Sajeetharan
@NgModule({
declarations: [
AppComponent,
GitSearchComponent
],
imports: [
FormsModule,
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [GitSearchService],
bootstrap: [AppComponent]
})
Upvotes: 0
Reputation: 85
Also you need to add ReactiveFormsModule in imports array if you are using reactive approach to handle the form.. try adding this.
Upvotes: 0
Reputation: 222712
Even though you have all the Modules needed, i see the component being missed inside the declarations array, change it as follows,
@NgModule({
declarations: [
AppComponent,
GitSearchComponent
],
imports: [
FormsModule,
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [GitSearchService],
bootstrap: [AppComponent]
})
Upvotes: 3
Reputation: 111
Try importing the form directives
import { FORM_DIRECTIVES } from '@angular/forms';
and add the
FORM_DIRECTIVES
to directives
Upvotes: 0