Primeng: Angular 2 RC5 Issue

[billdwhite]

When updating my app using the DataTable component from Angular 2 RC4 to RC5, I am getting this error at runtime:

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("                  <input type="text" class="ui-cell-editor ui-state-highlight" *ngIf="col.editable" [ERROR ->][(ngModel)]="rowData[col.field]"
                                            (blur)="switchCellToView"): DataTable@60:118
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("                  <input type="text" class="ui-cell-editor ui-state-highlight" *ngIf="col.editable" [ERROR ->][(ngModel)]="rowData[col.field]"
                                        (blur)="switchCellToViewMode"): DataTable@118:114 ; Zone: <root> ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Can't bind to 'ngModel' sin…(blur)="switchCellToViewMode"): DataTable@118:114", stack: "Error: Template parse errors:↵Can't bind to 'ngMod…0/ng/navigate/vendor/zone.js/dist/zone.js:356:38)"}message: "Template parse errors:↵Can't bind to 'ngModel' since it isn't a known property of 'input'. ("                  <input type="text" class="ui-cell-editor ui-state-highlight" *ngIf="col.editable" [ERROR ->][(ngModel)]="rowData[col.field]"↵                                            (blur)="switchCellToView"): DataTable@60:118↵Can't bind to 'ngModel' since it isn't a known property of 'input'. ("                  <input type="text" class="ui-cell-editor ui-state-highlight" *ngIf="col.editable" [ERROR ->][(ngModel)]="rowData[col.field]"↵                                        (blur)="switchCellToViewMode"): DataTable@118:114"stack: "Error: Template parse errors:↵Can't bind to 'ngModel' since it isn't a known property of 'input'. ("                  <input type="text" class="ui-cell-editor ui-state-highlight" *ngIf="col.editable" [ERROR ->][(ngModel)]="rowData[col.field]"↵                                            (blur)="switchCellToView"): DataTable@60:118↵Can't bind to 'ngModel' since it isn't a known property of 'input'. ("                  <input type="text" class="ui-cell-editor ui-state-highlight" *ngIf="col.editable" [ERROR ->][(ngModel)]="rowData[col.field]"↵                                        (blur)="switchCellToViewMode"): DataTable@118:114↵    at new BaseException (http://localhost:8080/ng/navigate/vendor/@angular/compiler/src/facade/exceptions.js:27:23)↵    at TemplateParser.parse (http://localhost:8080/ng/navigate/vendor/@angular/compiler/src/template_parser/template_parser.js:98:19)↵    at RuntimeCompiler._compileTemplate (http://localhost:8080/ng/navigate/vendor/@angular/compiler/src/runtime_compiler.js:246:51)↵    at eval (http://localhost:8080/ng/navigate/vendor/@angular/compiler/src/runtime_compiler.js:174:83)↵    at Set.forEach (native)↵    at compile (http://localhost:8080/ng/navigate/vendor/@angular/compiler/src/runtime_compiler.js:174:47)↵    at ZoneDelegate.invoke (http://localhost:8080/ng/navigate/vendor/zone.js/dist/zone.js:323:29)↵    at Zone.run (http://localhost:8080/ng/navigate/vendor/zone.js/dist/zone.js:216:44)↵    at http://localhost:8080/ng/navigate/vendor/zone.js/dist/zone.js:571:58↵    at ZoneDelegate.invokeTask (http://localhost:8080/ng/navigate/vendor/zone.js/dist/zone.js:356:38)"__proto__: ErrorconsoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Template parse errors:(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

Not sure if it is something I am doing wrong of if the DataTable component needs to be updated to work with RC5.

[bproctor-threatconnect]

You need to also update @angular/forms to 0.3.0

[billdwhite]

I am using @angular/forms 0.3.0. Still doesn't work. I've created a repo that shows the a demo with the problem. If you setup the package.json with RC5, forms 0.3.0 and router RC1....

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",

... you get the error message I mentioned above. If you revert the versions back to the previous releases below, it works fine:

"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",

I have not done the bootstrap to NgModule conversion on this demo but I have on my other projects and it has no effect. Plus, the RC4 to RC5 conversion docs say that the old bootstrapping method should still work.

[billdwhite]

I found that by importing 'FormsModule' from the '@angular/forms' package and adding it to the NgModule imports section, the error gets resolved.

[neha2790]

how did you do that @billdwhite ?

[ericeche]

Could you fix the git repo link you gave in your comments with the changes you did to make it work?