ng-select: [(ngModel)] not works: Can't bind to 'ngModel' since it isn't a known property of 'ng-select'.

I’m trying to use the official example, but I can not make it work. The example and the page not load. This error message appears in console:

Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ng-select'.
1. If 'ngModel' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

           placeholder="Select city"
           [ERROR ->][(ngModel)]="selectedItem"
           >
</ng-select>
"): ng:///SalesModule/SaleListComponent.html@5:11
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24661)
    at JitCompiler._parseTemplate (compiler.js:34601)
    at JitCompiler._compileTemplate (compiler.js:34576)
    at eval (compiler.js:34477)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34477)
    at eval (compiler.js:34347)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34346)

My code:


<ng-select [items]="cities"
           bindLabel="name"
           bindValue="id"

           placeholder="Select city"
           [(ngModel)]="selectedItem"
           >
</ng-select>

And:

import { Component, OnInit } from '@angular/core';
import {NgOption} from "@ng-select/ng-select";

@Component({
  selector: 'sale-list',
  templateUrl: './sale-list.component.html',
  styleUrls: ['./sale-list.component.css']
})
export class SaleListComponent implements OnInit {

    cities: NgOption[] = [
        {id: 1, name: 'Vilnius'},
        {id: 2, name: 'Kaunas'},
        {id: 3, name: 'Pabradė'},
        {id: 3, name: 'Klaipėda'},
        {id: 3, name: 'Nida'}
    ];
    selectedItem: any;

  constructor(
  ) { }

  ngOnInit() {
      this.selectedItem = this.cities[0].id;
  }

}

The example works fine when I remove the label [(ngModel)]. The page also works and there is no error using (ngModel), but the one-bind does not seem to work. [ngModel] also causes the error.

Packages:

  "name": "xxxxx",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.js",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.1.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
    "@ng-select/ng-select": "^0.11.0",
    "bootstrap": "^4.0.0-beta.3",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.4",
    "@angular/compiler-cli": "^5.1.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

Project using Angular Cli. ng-select version: latest version and 0.11.0. browser: Chromium 63.0.3239.108 reproducible in demo page: NO

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 5
  • Comments: 24

Most upvoted comments

Resolved including modules:

        FormsModule,
        ReactiveFormsModule,

I’m having this issue, I added FormsModule and ReactiveFormsModule to app.module.ts and to the actual module file… I am still getting the error?!

Add to your module file.

Hey guys! I just ran into the same issue and thought i’d clear it up, since this thread still seems to be going on! In the Angular tutorial, you need to add “FormsModule” to your app.module.ts file -> this will resolve everything.

Here’s what your code should look like in app.module.ts at this point:

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

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import {FormsModule} from '@angular/forms';

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

All I did was add “FormsModule” below “BrowserModule”. Cheers and happy learning! EDIT: It actually says exactly that in the tutorial when you read on 😛 Guess we’re all a little impatient 😄

@jbiddulph add formModule to you app-routing modules, that work with me

@Nekmo, @fayazrehmani is correct! Please show how you have resolved this with a code snippet. I am seeing the same problem and am unable to get the reference to be recognised with this lines added to app.modules.ts import { FormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';

Thanks

For me I had to update VS Code. 🤷🏾‍♂️

there no updates for me im still having the issue. im gonna lose my mind.

edit: omg im complete mess. my problem was simply a typing error. [{ngModel}] -------> [(ngModel)]

For me I had to update VS Code. 🤷🏾‍♂️

I’m having this issue, I added FormsModule and ReactiveFormsModule to app.module.ts and to the actual module file… I am still getting the error?!

https://github.com/ng-select/ng-select/issues/187#issuecomment-936022886