Can't bind to 'ngModel' since it isn't a known property of 'p-autoComplete'

Question

I have installed PrimeNg. I am using p-autoComplete component but this error occurs now. I checked everywhere but couldn't find anything. Also, all I was just trying to replicate one of offical PrimeNg demo. p-autocomplete component.

1 - I've installed PrimeNg like this.

npm install primeng --save
npm install primeicons --save

2 - I have added the module to my app.component.ts file like this.

import { AutoCompleteModule } from 'primeng/autocomplete';
//other imports
@NgModule({
declarations: [
  AppComponent,
  HomeComponent
],
imports: [
  BrowserModule,
  AutoCompleteModule
],
  providers: [CountryServiceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

3 - using Angular Cli I have created a service and added demo code from primeNg official website.

4 - I have showed my service in my app.component.ts file like this.

    import { CountryServiceService } from './country-service.service';
...
providers: [CountryServiceService],
...

5 - Created a component called home and in the home.component.html I copied and pasted official website deme code.

<h3 class="first">Basic</h3>
<p-autoComplete [(ngModel)]="country"         
[suggestions]="filteredCountriesSingle"         (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"     placeholder="Countries" [minLength]="1"></p-autoComplete>
<span style="margin-left:10px">Country: {{country ? country.name||country : 'none'}}</span>
<h3>Advanced</h3>
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30" [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true">
  <ng-template let-brand pTemplate="item">
    <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
      <img src="assets/showcase/images/demo/car/{{brand}}.png" style="width:32px;display:inline-block;margin:5px 0 2px 5px" />
      <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
    </div>
  </ng-template>
</p-autoComplete>
<span style="margin-left:50px">Brand: {{brand||'none'}}</span>
<h3>Multiple</h3>
<span class="ui-fluid">
    <p-autoComplete [(ngModel)]="countries" [suggestions]="filteredCountriesMultiple" (completeMethod)="filterCountryMultiple($event)" styleClass="wid100"
    [minLength]="1" placeholder="Countries" field="name" [multiple]="true">
    </p-autoComplete>
</span>
<ul>
  <li *ngFor="let c of countries">{{c.name}}</li>
</ul>

6 - in the home.component.ts file I copied and pasted official website demo code.

7 - in the app.component.html I added my home component to see if everything works.

So, I did these steps and I am not getting the desired behavior or I cant even see a rendered html page.

When I inspect the page I get the following error

So, WHAT IS IT THAT I AM DOING WRONG. SERIOUSLY!... STUPID PrimeNg

Possible duplicate of [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) — Tim Martens, Aug 01 '18 at 10:49
template parse error means, error only in html part so again analyse your html code — Ravindra Gupta, Aug 01 '18 at 11:14
@RavindraGupta But I didn't even write the html code I just copied and pasted from the official PrimeNg website. — Aytunc MATRAC, Aug 01 '18 at 11:24

score 15 · Accepted Answer · answered Aug 01 '18 at 10:49

You need to import the FormsModule since ngModel is part of it:

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

import { AutoCompleteModule } from 'primeng/autocomplete';
//other imports
@NgModule({
declarations: [
  AppComponent,
  HomeComponent
],
imports: [
  BrowserModule,
  FormsModule,
  ^^^^^^^^^^^^
  AutoCompleteModule
],
  providers: [CountryServiceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Akj · Answer 2 · 2018-08-01T12:21:05.850

Working Fine For me example

basic html:

<p>
    p-autoComplete Example
</p>

<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"></p-autoComplete>

{{text}}

app.module.ts:

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import {AutoCompleteModule} from 'primeng/autocomplete';

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

app.component.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  text: string;

  results: string[]

  search(event) {
    this.results = ['aashish', 'ajay', 'Rama', 'Pidi'];
  }
}

I did that, problem still exist – Aytunc MATRAC Aug 01 '18 at 11:12 — Aytunc MATRAC, Aug 01 '18 at 11:12
check step 5 its there – Aytunc MATRAC Aug 01 '18 at 11:31 — Aytunc MATRAC, Aug 01 '18 at 11:31

Can't bind to 'ngModel' since it isn't a known property of 'p-autoComplete'

2 Answers2