support for @angular/forms

.config/bundle-system.js

@@ -43,6 +43,7 @@ function getSystemJsBundleConfig(cb) {
       '@angular/core': path.resolve('node_modules/@angular/core/index.js'),
       '@angular/common': path.resolve('node_modules/@angular/common/index.js'),
       '@angular/compiler': path.resolve('node_modules/@angular/compiler/index.js'),
+      '@angular/forms': path.resolve('node_modules/@angular/forms/index.js'),
       '@angular/platform-browser': path.resolve('node_modules/@angular/platform-browser/index.js'),
       '@angular/platform-browser-dynamic': path.resolve('node_modules/@angular/platform-browser-dynamic/'),
       rxjs: path.resolve('node_modules/rxjs')
@@ -52,7 +53,7 @@ function getSystemJsBundleConfig(cb) {
     }
   };
 
-  config.meta = ['@angular/common','@angular/compiler','@angular/core',
+  config.meta = ['@angular/common','@angular/compiler','@angular/core', '@angular/forms',
     '@angular/platform-browser','@angular/platform-browser-dynamic', 'rxjs'].reduce((memo, currentValue) => {
     memo[path.resolve(`node_modules/${currentValue}/*`)] = {build: false};
     return memo;

components/buttons/button-checkbox.directive.ts

@@ -1,7 +1,7 @@
 import {
   Directive, OnInit, Input, HostBinding, HostListener, Self
 } from '@angular/core';
-import {ControlValueAccessor, NgModel} from '@angular/common';
+import {ControlValueAccessor, NgModel} from '@angular/forms';
 
 // TODO: config: activeClass - Class to apply to the checked buttons.
 

components/buttons/button-radio.directive.ts

@@ -1,7 +1,7 @@
 import {
   Directive, OnInit, Input, HostBinding, HostListener, Self, ElementRef
 } from '@angular/core';
-import {ControlValueAccessor, NgModel} from '@angular/common';
+import {ControlValueAccessor, NgModel} from '@angular/forms';
 
 // TODO: if uncheckable, null should be set to ngModel
 // if disabled, button should not be checkable

components/datepicker/datepicker-inner.component.ts

@@ -1,7 +1,6 @@
 import {Component, OnInit, EventEmitter, Input, OnChanges} from '@angular/core';
-import {
-  CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgModel
-} from '@angular/common';
+import {CORE_DIRECTIVES, NgClass} from '@angular/common';
+import {FORM_DIRECTIVES, NgModel} from '@angular/forms';
 import {DateFormatter} from './date-formatter';
 
 const FORMAT_DAY = 'DD';

components/datepicker/datepicker-popup.component.ts

@@ -2,9 +2,8 @@ import {
   Component, Directive, EventEmitter, ComponentRef, ViewEncapsulation,
   ElementRef, DynamicComponentLoader, Self, Renderer, ReflectiveInjector, provide, ViewContainerRef
 } from '@angular/core';
-import {
-  CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgModel, NgStyle
-} from '@angular/common';
+import {CORE_DIRECTIVES, NgClass, NgStyle} from '@angular/common';
+import {FORM_DIRECTIVES, NgModel} from '@angular/forms';
 import {KeyAttribute} from '../common';
 import {positionService} from '../position';
 import {DatePickerComponent} from './datepicker.component';

components/datepicker/datepicker.component.ts

@@ -1,5 +1,6 @@
 import {Component, Self, Input} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, ControlValueAccessor, NgModel} from '@angular/common';
+import {CORE_DIRECTIVES} from '@angular/common';
+import {FORM_DIRECTIVES, ControlValueAccessor, NgModel} from '@angular/forms';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 import {DayPickerComponent} from './daypicker.component';
 import {MonthPickerComponent} from './monthpicker.component';

components/datepicker/daypicker.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
+import {CORE_DIRECTIVES, NgClass} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap-config';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 

components/datepicker/monthpicker.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
+import {CORE_DIRECTIVES, NgClass} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 import {Ng2BootstrapConfig} from '../ng2-bootstrap-config';
 

components/datepicker/yearpicker.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
+import {CORE_DIRECTIVES, NgClass} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {Ng2BootstrapConfig} from '../ng2-bootstrap-config';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 

components/pagination/pager.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit, ElementRef, Renderer, Self} from '@angular/core';
-import {NgModel, NgClass} from '@angular/common';
+import {NgClass} from '@angular/common';
+import {NgModel} from '@angular/forms';
 import {PaginationComponent} from './pagination.component';
 
 const pagerConfig = {

components/pagination/pagination.component.ts

@@ -1,7 +1,8 @@
 import {
   Component, OnInit, Input, Output, ElementRef, EventEmitter, Self, Renderer
 } from '@angular/core';
-import {NgFor, NgIf, ControlValueAccessor, NgModel} from '@angular/common';
+import {NgFor, NgIf} from '@angular/common';
+import {ControlValueAccessor, NgModel} from '@angular/forms';
 import {KeyAttribute} from '../common';
 
 // todo: extract base functionality classes

components/rating/rating.component.ts

@@ -1,7 +1,8 @@
 import {
   Component, OnInit, Input, Output, HostListener, Self, EventEmitter
 } from '@angular/core';
-import {NgFor, ControlValueAccessor, NgModel} from '@angular/common';
+import {NgFor} from '@angular/common';
+import {ControlValueAccessor, NgModel} from '@angular/forms';
 
 import {global} from '@angular/core/src/facade/lang';
 /* tslint:disable */

components/timepicker/timepicker.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit, Input, Self} from '@angular/core';
-import {NgClass, NgModel, ControlValueAccessor} from '@angular/common';
+import {NgClass} from '@angular/common';
+import {NgModel, ControlValueAccessor} from '@angular/forms';
 
 export interface TimepickerConfig {
   hourStep:number;

components/typeahead/typeahead.directive.ts

@@ -2,7 +2,7 @@ import {
   Directive, Input, Output, HostListener, EventEmitter, OnInit, ElementRef,
   Renderer, DynamicComponentLoader, ComponentRef, ReflectiveInjector, provide, ViewContainerRef
 } from '@angular/core';
-import {NgModel} from '@angular/common';
+import {NgModel} from '@angular/forms';
 import {TypeaheadUtils} from './typeahead-utils';
 import {TypeaheadContainerComponent} from './typeahead-container.component';
 import {TypeaheadOptions} from './typeahead-options.class';

demo/components/buttons/buttons-demo.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
+import {CORE_DIRECTIVES} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {BUTTON_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports

demo/components/datepicker/datepicker-demo.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
+import {CORE_DIRECTIVES} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 
 import * as moment from 'moment';
 import {DATEPICKER_DIRECTIVES} from '../../../ng2-bootstrap';

demo/components/pagination/pagination-demo.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
+import {CORE_DIRECTIVES} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {PAGINATION_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports

demo/components/rating/rating-demo.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
+import {CORE_DIRECTIVES} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {RatingComponent} from '../../../ng2-bootstrap';
 
 // webpack html imports

demo/components/timepicker/timepicker-demo.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
+import {CORE_DIRECTIVES} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {TimepickerComponent} from '../../../ng2-bootstrap';
 
 // webpack html imports

demo/components/tooltip/tooltip-demo.html

@@ -1,10 +1,10 @@
 <div class="form-group">
   <label>Dynamic Tooltip Text</label>
-  <input type="text" [(ngModel)]="dynamicTooltipText" class="form-control">
+  <input type="text" name="dynamicTooltipText" [(ngModel)]="dynamicTooltipText" class="form-control">
 </div>
 <div class="form-group">
   <label>Dynamic Tooltip Popup Text</label>
-  <input type="text" [(ngModel)]="dynamicTooltip" class="form-control">
+  <input type="text" name="dynamicTooltip" [(ngModel)]="dynamicTooltip" class="form-control">
 </div>
 <p>
   Pellentesque <a href="#" [tooltip]="dynamicTooltip">{{dynamicTooltipText}}</a>,
@@ -33,12 +33,12 @@
 <form role="form">
   <div class="form-group">
     <label>Or use custom triggers, like focus: </label>
-    <input type="text" value="Click me!" tooltip="See? Now click away..."  tooltipTrigger="focus" tooltipPlacement="right" class="form-control" />
+    <input type="text" name="tooltip" value="Click me!" tooltip="See? Now click away..."  tooltipTrigger="focus" tooltipPlacement="right" class="form-control" />
   </div>
 
   <div class="form-group" ngClass="{'has-error' : !inputModel}">
     <label>Disable tooltips conditionally:</label>
-    <input type="text" [(ngModel)]="inputModel" class="form-control"
+    <input type="text" name="inputModel" [(ngModel)]="inputModel" class="form-control"
            placeholder="Hover over this for a tooltip until this is filled"
            tooltip="Enter something in this input field to disable this tooltip"
            tooltipPlacement="top"

demo/components/tooltip/tooltip-demo.ts

@@ -1,5 +1,6 @@
 import {Component, ChangeDetectionStrategy} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
+import {CORE_DIRECTIVES} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {TOOLTIP_DIRECTIVES} from '../../../ng2-bootstrap';
 
 // webpack html imports

demo/index.ts

@@ -1,9 +1,6 @@
-import {
-  Component, enableProdMode, ViewContainerRef, AfterContentInit
-} from '@angular/core';
-import {
-  RouterOutlet, RouteConfig, ROUTER_PROVIDERS, Router
-} from '@angular/router-deprecated';
+import {Component, enableProdMode, ViewContainerRef} from '@angular/core';
+import {disableDeprecatedForms, provideForms} from '@angular/forms';
+import {RouterOutlet, RouteConfig, ROUTER_PROVIDERS} from '@angular/router-deprecated';
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap';
 import {MainMenuComponent} from './components/main-menu/main-menu.component';
 import {TopMenuComponent} from './components/top-menu/top-menu.component';
@@ -55,7 +52,10 @@ export class DemoComponent implements AfterContentInit {
   }
 }
 
-bootstrap(DemoComponent, [ROUTER_PROVIDERS,
+bootstrap(DemoComponent, [
+  ROUTER_PROVIDERS,
+  disableDeprecatedForms(),
+  provideForms(),
   {provide: APP_BASE_HREF, useValue: '/'},
-  {provide: LocationStrategy, useClass: HashLocationStrategy}]);
-
+  {provide: LocationStrategy, useClass: HashLocationStrategy}
+]);

package.json

@@ -52,16 +52,18 @@
     "moment": "2.13.0"
   },
   "peerDependencies": {
-    "@angular/common": "2.0.0-rc.3",
-    "@angular/compiler": "2.0.0-rc.3",
-    "@angular/core": "2.0.0-rc.3"
+    "@angular/common": "^2.0.0-rc.2",
+    "@angular/compiler": "^2.0.0-rc.2",
+    "@angular/core": "^2.0.0-rc.2",
+    "@angular/forms": "^0.1.0"
   },
   "devDependencies": {
-    "@angular/common": "2.0.0-rc.3",
-    "@angular/compiler": "2.0.0-rc.3",
-    "@angular/core": "2.0.0-rc.3",
-    "@angular/platform-browser": "2.0.0-rc.3",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
+    "@angular/common": "^2.0.0-rc.2",
+    "@angular/compiler": "^2.0.0-rc.2",
+    "@angular/core": "^2.0.0-rc.2",
+    "@angular/forms": "^0.1.0",
+    "@angular/platform-browser": "^2.0.0-rc.2",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.2",
     "@angular/router-deprecated": "2.0.0-rc.2",
     "async": "1.5.2",
     "bootstrap": "3.3.6",