Lonely Programmer Lonely Programmer - 3 months ago 112
JSON Question

Angular2 and Observables: Can't bind to 'ngModel' since it isn't a known property of 'select'

EDIT: Updated Plunkr: http://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq?p=preview

this part works:

<div *ngFor="let entry of entries | async">
Label: {{ entry.label }}<br>
Value: {{ entry.value }}
</div>


but I've problems with the select box, the error message is:

Can't bind to 'ngModel' since it isn't a known property of 'select'

The whole Component:

//our root app component
import {Component} from '@angular/core';
import {NgFor} from '@angular/common';
import {HTTP_PROVIDERS, Http} from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Rx';

@Component({
selector: 'my-app',
providers: [HTTP_PROVIDERS],
template: `

<select [(ngModel)]="selectValue" name="selectValue">
<option *ngFor="let entry of entries | async"
[value]="entry.value">{{entry.label}}</option>
</select>

<div *ngFor="let entry of entries | async">
Label: {{ entry.label }}<br>
Value: {{ entry.value }}
</div>
`,
directives: [NgFor]
})
export class App {

entries: any = {};
selectValue:any;

constructor(private _http: Http) {
this.entries = this._http.get("./data.json")
.map(res => res.json());
}
}


and data.json

[
{
"timestamp": 0,
"label": "l1",
"value": 1
},
{
"timestamp": 0,
"label": "l2",
"value": 2
},
{
"timestamp": 0,
"label": "l3",
"value": 3
}
]

Answer

In config.js add

'@angular/forms': {
  main: 'bundles/forms.umd.js',
  defaultExtension: 'js'
},

in main.ts add

import {provideForms, disableDeprecatedForms} from '@angular/forms';

bootstrap(App, [disableDeprecatedForms(),provideForms()])

Plunker example

See also