CODEWITHSUNDEEP
angular
Crowdpleasr
Crowdpleasr

Reputation: 4038

Still get: “Can't bind to 'ngModel' since it isn't a known property of 'input'.”

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

Answers (4)

priya_21
priya_21

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

Mitesh
Mitesh

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

Sajeetharan
Sajeetharan

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

Karthik_Siddh
Karthik_Siddh

Reputation: 111

Try importing the form directives 

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

and add the 

FORM_DIRECTIVES

 to directives 

Upvotes: 0

Related Questions