feat(forms): update forms to latest version

package.json

@@ -36,8 +36,8 @@
     "leaflet": "^0.7.7",
     "leaflet-map": "^0.2.1",
     "lodash": "^4.12.0",
-    "ng2-bootstrap": "^1.0.16",
+    "ng2-bootstrap": "^1.0.17",
-    "ng2-ckeditor": "^1.0.3",
+    "ng2-ckeditor": "^1.0.4",
     "ng2-uploader": "^0.5.2",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.6",

src/app/pages/editors/components/ckeditor/ckeditor.component.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {CKEditor} from 'ng2-ckeditor';
-import {BaCard} from "../../../../theme/components/baCard/baCard.component";
+import {BaCard} from '../../../../theme/components/baCard';
 
 import './ckeditor.loader.ts';
 
@@ -11,11 +11,12 @@ import './ckeditor.loader.ts';
 })
 
 export class Ckeditor {
-  private ckeditorContent;
+  public ckeditorContent:string = '<p>Hello CKEditor</p>';
-  private config;
+  public config = {
-  
+    uiColor: '#F0F3F4',
+    height: '600'
+  };
+
   constructor() {
-    this.ckeditorContent = `<p>Hello CKEditor</p>`;
-    this.config = {uiColor: '#F0F3F4', height: '600'};
   }
 }

src/app/pages/login/login.component.ts

@@ -1,5 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl} from '@angular/common';
+import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/forms';
 
 @Component({
   selector: 'login',
@@ -10,7 +10,7 @@ import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl}
 })
 export class Login {
 
-  public form:ControlGroup;
+  public form:FormGroup;
   public email:AbstractControl;
   public password:AbstractControl;
   public submitted:boolean = false;
@@ -24,7 +24,7 @@ export class Login {
     this.email = this.form.controls['email'];
     this.password = this.form.controls['password'];
   }
-  
+
   public onSubmit(values:Object):void {
     this.submitted = true;
     if (this.form.valid) {

src/app/pages/login/login.html

@@ -3,19 +3,19 @@
     <h1>Sign in to ng2-admin</h1>
     <a [routerLink]="['Register']" class="auth-link">New to ng2-admin? Sign up!</a>
 
-    <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
+    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
       <div class="form-group row" [ngClass]="{'has-error': (!email.valid && email.touched), 'has-success': (email.valid && email.touched)}">
         <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 
         <div class="col-sm-10">
-          <input [ngFormControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
+          <input [formControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
         </div>
       </div>
       <div class="form-group row" [ngClass]="{'has-error': (!password.valid && password.touched), 'has-success': (password.valid && password.touched)}">
         <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
 
         <div class="col-sm-10">
-          <input [ngFormControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
+          <input [formControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
         </div>
       </div>
       <div class="form-group row">

src/app/pages/register/register.component.ts

@@ -1,5 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl} from '@angular/common';
+import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/forms';
 import {EmailValidator, EqualPasswordsValidator} from '../../theme/validators';
 
 @Component({
@@ -11,12 +11,12 @@ import {EmailValidator, EqualPasswordsValidator} from '../../theme/validators';
 })
 export class Register {
 
-  public form:ControlGroup;
+  public form:FormGroup;
   public name:AbstractControl;
   public email:AbstractControl;
   public password:AbstractControl;
   public repeatPassword:AbstractControl;
-  public passwords:ControlGroup;
+  public passwords:FormGroup;
 
   public submitted:boolean = false;
 
@@ -33,7 +33,7 @@ export class Register {
 
     this.name = this.form.controls['name'];
     this.email = this.form.controls['email'];
-    this.passwords = <ControlGroup> this.form.controls['passwords'];
+    this.passwords = <FormGroup> this.form.controls['passwords'];
     this.password = this.passwords.controls['password'];
     this.repeatPassword = this.passwords.controls['repeatPassword'];
   }

src/app/pages/register/register.html

@@ -3,33 +3,33 @@
     <h1>Sign up to ng2-admin</h1>
     <a [routerLink]="['Login']" class="auth-link">Already have an ng2-admin account? Sign in!</a>
 
-    <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
+    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
       <div class="form-group row" [ngClass]="{'has-error': (!name.valid && name.touched), 'has-success': (name.valid && name.touched)}">
         <label for="inputName3" class="col-sm-2 control-label">Name</label>
 
         <div class="col-sm-10">
-          <input [ngFormControl]="name" type="text" class="form-control" id="inputName3" placeholder="Full Name">
+          <input [formControl]="name" type="text" class="form-control" id="inputName3" placeholder="Full Name">
         </div>
       </div>
       <div class="form-group row" [ngClass]="{'has-error': (!email.valid && email.touched), 'has-success': (email.valid && email.touched)}">
         <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 
         <div class="col-sm-10">
-          <input [ngFormControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
+          <input [formControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
         </div>
       </div>
       <div class="form-group row" [ngClass]="{'has-error': (!password.valid && password.touched), 'has-success': (password.valid && password.touched)}">
         <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
 
         <div class="col-sm-10">
-          <input [ngFormControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
+          <input [formControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
         </div>
       </div>
       <div class="form-group row" [ngClass]="{'has-error': (!repeatPassword.valid && repeatPassword.touched), 'has-success': (repeatPassword.valid && repeatPassword.touched)}">
         <label for="inputPassword4" class="col-sm-2 control-label">Repeat</label>
 
         <div class="col-sm-10">
-          <input [ngFormControl]="repeatPassword" type="password" class="form-control" id="inputPassword4" placeholder="Repeat">
+          <input [formControl]="repeatPassword" type="password" class="form-control" id="inputPassword4" placeholder="Repeat">
           <span *ngIf="!passwords.valid && (password.touched || repeatPassword.touched)" class="help-block sub-little-text">Passwords don't match.</span>
         </div>
       </div>

src/app/theme/validators/email.validator.ts

@@ -1,14 +1,14 @@
-import {Control} from '@angular/common';
+import {AbstractControl} from '@angular/forms';
 
 export class EmailValidator {
 
-  public static validate(c: Control) {
+  public static validate(c:AbstractControl) {
     let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
-    
+
     return EMAIL_REGEXP.test(c.value) ? null : {
       validateEmail: {
         valid: false
       }
     };
   }
-}
+}

src/app/theme/validators/equalPasswords.validator.ts

@@ -1,11 +1,11 @@
-import {Control, ControlGroup} from '@angular/common';
+import {FormGroup} from '@angular/forms';
 
 export class EqualPasswordsValidator {
 
   public static validate(firstField, secondField) {
-    
+
-    return (c: ControlGroup) => {
+    return (c:FormGroup) => {
-      
+
       return (c.controls && c.controls[firstField].value == c.controls[secondField].value) ? null : {
         passwordsEqual: {
           valid: false
@@ -13,4 +13,4 @@ export class EqualPasswordsValidator {
       };
     }
   }
-}
+}

src/platform/browser/directives.ts

@@ -6,10 +6,13 @@ import {PLATFORM_DIRECTIVES} from '@angular/core';
 
 // Angular 2 Router
 import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
+// Angular 2 forms
+import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
 
 // application_directives: directives that are global through out the application
 export const APPLICATION_DIRECTIVES = [
-  ...ROUTER_DIRECTIVES
+  ...ROUTER_DIRECTIVES,
+  ...REACTIVE_FORM_DIRECTIVES
 ];
 
 export const DIRECTIVES = [

src/platform/browser/providers.ts

@@ -10,15 +10,20 @@ import {HTTP_PROVIDERS} from '@angular/http';
 // Angular 2 Router
 import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
 
+// Angular 2 forms
+import {disableDeprecatedForms, provideForms} from '@angular/forms';
+
 /*
-* Application Providers/Directives/Pipes
+ * Application Providers/Directives/Pipes
-* providers/directives/pipes that only live in our browser environment
+ * providers/directives/pipes that only live in our browser environment
-*/
+ */
 export const APPLICATION_PROVIDERS = [
-  ...FORM_PROVIDERS,
+  // new Angular 2 forms
+  disableDeprecatedForms(),
+  provideForms(),
   ...HTTP_PROVIDERS,
   ...ROUTER_PROVIDERS,
-  {provide: LocationStrategy, useClass: HashLocationStrategy }
+  {provide: LocationStrategy, useClass: HashLocationStrategy}
 ];
 
 export const PROVIDERS = [