Client: update to new form api

client/package.json

@@ -22,6 +22,7 @@
     "@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",
@@ -42,7 +43,7 @@
     "ie-shim": "^0.1.0",
     "intl": "^1.2.4",
     "json-loader": "^0.5.4",
-    "ng2-bootstrap": "1.0.16",
+    "ng2-bootstrap": "1.0.24",
     "ng2-file-upload": "^1.0.3",
     "node-sass": "^3.7.0",
     "normalize.css": "^4.1.1",

client/src/app/account/account.component.html

@@ -3,14 +3,14 @@
 <div *ngIf="information" class="alert alert-success">{{ information }}</div>
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form role="form" (ngSubmit)="changePassword(newPassword.value, newConfirmedPassword.value)" [ngFormModel]="changePasswordForm">
+<form role="form" (ngSubmit)="changePassword()" [formGroup]="changePasswordForm">
   <div class="form-group">
     <label for="new-password">New password</label>
     <input
       type="password" class="form-control" name="new-password" id="new-password"
-      ngControl="newPassword" #newPassword="ngForm"
+      [(ngModel)]="newPassword" #newPasswordInput="ngModel"
     >
-    <div [hidden]="newPassword.valid || newPassword.pristine" class="alert alert-warning">
+    <div [hidden]="changePasswordForm.controls['new-password'].valid || changePasswordForm.controls['new-password'].pristine" class="alert alert-warning">
       The password should have more than 5 characters
     </div>
   </div>
@@ -19,7 +19,7 @@
     <label for="name">Confirm new password</label>
     <input
       type="password" class="form-control" name="new-confirmed-password" id="new-confirmed-password"
-      ngControl="newConfirmedPassword" #newConfirmedPassword="ngForm"
+      [(ngModel)]="newConfirmedPassword" #newConfirmedPasswordInput="ngModel"
     >
   </div>
 

client/src/app/account/account.component.ts

@@ -1,5 +1,6 @@
-import { Control, ControlGroup, Validators } from '@angular/common';
+import { Validators } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { AccountService } from './account.service';
@@ -7,11 +8,14 @@ import { AccountService } from './account.service';
 @Component({
   selector: 'my-account',
   template: require('./account.component.html'),
-  providers: [ AccountService ]
+  providers: [ AccountService ],
+  directives: [ REACTIVE_FORM_DIRECTIVES ]
 })
 
 export class AccountComponent implements OnInit {
-  changePasswordForm: ControlGroup;
+  newPassword = '';
+  newConfirmedPassword = '';
+  changePasswordForm: FormGroup;
   information: string = null;
   error: string = null;
 
@@ -21,22 +25,22 @@ export class AccountComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.changePasswordForm = new ControlGroup({
+    this.changePasswordForm = new FormGroup({
-      newPassword: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])),
+      'new-password': new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]),
-      newConfirmedPassword: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])),
+      'new-confirmed-password': new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]),
     });
   }
 
-  changePassword(newPassword: string, newConfirmedPassword: string) {
+  changePassword() {
     this.information = null;
     this.error = null;
 
-    if (newPassword !== newConfirmedPassword) {
+    if (this.newPassword !== this.newConfirmedPassword) {
       this.error = 'The new password and the confirmed password do not correspond.';
       return;
     }
 
-    this.accountService.changePassword(newPassword).subscribe(
+    this.accountService.changePassword(this.newPassword).subscribe(
       ok => this.information = 'Password updated.',
 
       err => this.error = err

client/src/app/admin/friends/friend-add/friend-add.component.html

@@ -2,11 +2,11 @@
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form role="form" (ngSubmit)="makeFriends()">
+<form (ngSubmit)="makeFriends()">
   <div class="form-group"  *ngFor="let url of urls; let id = index; trackBy:customTrackBy">
     <label for="username">Url</label>
     <div class="input-group">
-      <input type="text" class="form-control" name="url" id="url" placeholder="http://domain.com" [(ngModel)]="urls[id]" />
+      <input type="text" class="form-control" [name]="'url-' + id"  [id]="'url-' + id" placeholder="http://domain.com" [(ngModel)]="urls[id]" />
       <span class="input-group-btn">
         <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
         <button *ngIf="displayRemoveField(id)" (click)="removeField(index)" class="btn btn-default" type="button">-</button>

client/src/app/admin/friends/friend-add/friend-add.component.ts

@@ -53,7 +53,7 @@ export class FriendAddComponent {
       return;
     }
 
-    const confirmMessage = 'Are you sure to make friends with:\n - ' + this.urls.join('\n - ');
+    const confirmMessage = 'Are you sure to make friends with:\n - ' + notEmptyUrls.join('\n - ');
     if (!confirm(confirmMessage)) return;
 
     this.friendService.makeFriends(notEmptyUrls).subscribe(

client/src/app/admin/users/user-add/user-add.component.html

@@ -2,14 +2,14 @@
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form role="form" (ngSubmit)="addUser(username.value, password.value)" #addUserForm="ngForm">
+<form role="form" (ngSubmit)="addUser()" [formGroup]="userAddForm">
   <div class="form-group">
     <label for="username">Username</label>
     <input
-      type="text" class="form-control" name="username" id="username" placeholder="Username" required
+      type="text" class="form-control" name="username" id="username" placeholder="Username"
-      ngControl="username" #username="ngForm"
+      [(ngModel)]="username"
     >
-    <div [hidden]="username.valid || username.pristine" class="alert alert-danger">
+    <div [hidden]="userAddForm.controls.username.valid || userAddForm.controls.username.pristine" class="alert alert-danger">
       Username is required with a length >= 3 and <= 20
     </div>
   </div>
@@ -17,13 +17,13 @@
   <div class="form-group">
     <label for="password">Password</label>
     <input
-      type="password" class="form-control" name="password" id="password" placeholder="Password" required
+      type="password" class="form-control" name="password" id="password" placeholder="Password"
-      ngControl="password" #password="ngForm"
+      [(ngModel)]="password"
     >
-    <div [hidden]="password.valid || password.pristine" class="alert alert-danger">
+    <div [hidden]="userAddForm.controls.password.valid || userAddForm.controls.password.pristine" class="alert alert-danger">
       Password is required with a length >= 6
     </div>
   </div>
 
-  <input type="submit" value="Add user" class="btn btn-default" [disabled]="!addUserForm.form.valid">
+  <input type="submit" value="Add user" class="btn btn-default" [disabled]="!userAddForm.valid">
 </form>

client/src/app/admin/users/user-add/user-add.component.ts

@@ -1,5 +1,6 @@
-import { Control, ControlGroup, Validators } from '@angular/common';
+import { Validators } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { UserService } from '../shared';
@@ -7,24 +8,27 @@ import { UserService } from '../shared';
 @Component({
   selector: 'my-user-add',
   template: require('./user-add.component.html'),
+  directives: [ REACTIVE_FORM_DIRECTIVES ]
 })
 export class UserAddComponent implements OnInit {
-  userAddForm: ControlGroup;
+  userAddForm: FormGroup;
   error: string = null;
+  username = '';
+  password = '';
 
   constructor(private router: Router, private userService: UserService) {}
 
   ngOnInit() {
-    this.userAddForm = new ControlGroup({
+    this.userAddForm = new FormGroup({
-      username: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(20) ])),
+      username: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(20) ]),
-      password: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])),
+      password: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]),
     });
   }
 
-  addUser(username: string, password: string) {
+  addUser() {
     this.error = null;
 
-    this.userService.addUser(username, password).subscribe(
+    this.userService.addUser(this.username, this.password).subscribe(
       ok => this.router.navigate([ '/admin/users/list' ]),
 
       err => this.error = err

client/src/app/login/login.component.html

@@ -1,16 +1,15 @@
 <h3>Login</h3>
 
-
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form role="form" (ngSubmit)="login(username.value, password.value)" #loginForm="ngForm">
+<form role="form" (ngSubmit)="login()" [formGroup]="loginForm">
   <div class="form-group">
     <label for="username">Username</label>
     <input
-      type="text" class="form-control" name="username" id="username" placeholder="Username" required
+      type="text" class="form-control" name="username" id="username" placeholder="Username"
-      ngControl="username" #username="ngForm"
+      [(ngModel)]="username"
     >
-    <div [hidden]="username.valid || username.pristine" class="alert alert-danger">
+    <div [hidden]="loginForm.controls.username.valid || loginForm.controls.username.pristine" class="alert alert-danger">
       Username is required
     </div>
   </div>
@@ -18,13 +17,13 @@
   <div class="form-group">
     <label for="password">Password</label>
     <input
-      type="password" class="form-control" name="password" id="password" placeholder="Password" required
+      type="password" class="form-control" name="password" id="password" placeholder="Password"
-      ngControl="password" #password="ngForm"
+      [(ngModel)]="password"
     >
-    <div [hidden]="password.valid || password.pristine" class="alert alert-danger">
+    <div [hidden]="loginForm.controls.password.valid || loginForm.controls.password.pristine" class="alert alert-danger">
       Password is required
     </div>
   </div>
 
-  <input type="submit" value="Login" class="btn btn-default" [disabled]="!loginForm.form.valid">
+  <input type="submit" value="Login" class="btn btn-default" [disabled]="!loginForm.valid">
 </form>

client/src/app/login/login.component.ts

@@ -1,23 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Validators } from '@angular/common';
+import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { AuthService } from '../shared';
 
 @Component({
   selector: 'my-login',
-  template: require('./login.component.html')
+  template: require('./login.component.html'),
+  directives: [ REACTIVE_FORM_DIRECTIVES ]
 })
 
-export class LoginComponent {
+export class LoginComponent implements OnInit {
   error: string = null;
+  username = '';
+  password: '';
+  loginForm: FormGroup;
 
   constructor(
     private authService: AuthService,
     private router: Router
   ) {}
 
-  login(username: string, password: string) {
+  ngOnInit() {
-    this.authService.login(username, password).subscribe(
+    this.loginForm = new FormGroup({
+      username: new FormControl('', [ <any>Validators.required ]),
+      password: new FormControl('', [ <any>Validators.required ]),
+    });
+  }
+
+  login() {
+    this.authService.login(this.username, this.password).subscribe(
       result => {
         this.error = null;
 

client/src/app/videos/video-add/video-add.component.html

@@ -2,14 +2,14 @@
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form novalidate (ngSubmit)="upload()" [ngFormModel]="videoForm">
+<form novalidate (ngSubmit)="upload()" [formGroup]="videoForm">
   <div class="form-group">
     <label for="name">Name</label>
     <input
       type="text" class="form-control" name="name" id="name"
-      ngControl="name" #name="ngForm" [(ngModel)]="video.name"
+      [(ngModel)]="video.name"
     >
-    <div [hidden]="name.valid || name.pristine" class="alert alert-warning">
+    <div [hidden]="videoForm.controls.name.valid || videoForm.controls.name.pristine" class="alert alert-warning">
       A name is required and should be between 3 and 50 characters long
     </div>
   </div>
@@ -18,9 +18,9 @@
     <label for="tags">Tags</label>
     <input
       type="text" class="form-control" name="tags" id="tags"
-      ngControl="tags" #tags="ngForm" [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag"
+      [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag"
     >
-    <div [hidden]="tags.valid || tags.pristine" class="alert alert-warning">
+    <div [hidden]="videoForm.controls.tags.valid || videoForm.controls.tags.pristine" class="alert alert-warning">
       A tag should be between 2 and 10 characters (alphanumeric) long
     </div>
   </div>
@@ -54,10 +54,10 @@
     <label for="description">Description</label>
     <textarea
       name="description" id="description" class="form-control" placeholder="Description..."
-      ngControl="description"  #description="ngForm" [(ngModel)]="video.description"
+      [(ngModel)]="video.description"
     >
     </textarea>
-    <div [hidden]="description.valid || description.pristine" class="alert alert-warning">
+    <div [hidden]="videoForm.controls.description.valid || videoForm.controls.description.pristine" class="alert alert-warning">
         A description is required and should be between 3 and 250 characters long
     </div>
   </div>

client/src/app/videos/video-add/video-add.component.ts

@@ -1,5 +1,6 @@
-import { Control, ControlGroup, Validators } from '@angular/common';
+import { Validators } from '@angular/common';
 import { Component, ElementRef, OnInit } from '@angular/core';
+import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
@@ -12,14 +13,14 @@ import { AuthService } from '../../shared';
   selector: 'my-videos-add',
   styles: [ require('./video-add.component.scss') ],
   template: require('./video-add.component.html'),
-  directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES ],
+  directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ],
   pipes: [ BytesPipe ]
 })
 
 export class VideoAddComponent implements OnInit {
   currentTag: string; // Tag the user is writing in the input
   error: string = null;
-  videoForm: ControlGroup;
+  videoForm: FormGroup;
   uploader: FileUploader;
   video = {
     name: '',
@@ -70,10 +71,10 @@ export class VideoAddComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.videoForm = new ControlGroup({
+    this.videoForm = new FormGroup({
-      name: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(50) ])),
+      name: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(50) ]),
-      description: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(250) ])),
+      description: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(250) ]),
-      tags: new Control('', Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
+      tags: new FormControl('', <any>Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
     });
 
 

client/src/main.ts

@@ -1,4 +1,5 @@
 import { enableProdMode, provide } from '@angular/core';
+import { disableDeprecatedForms, provideForms } from '@angular/forms';
 import {
   HTTP_PROVIDERS,
   RequestOptions,
@@ -23,6 +24,11 @@ bootstrap(AppComponent, [
     },
     deps: [ XHRBackend, RequestOptions, AuthService ]
   }),
+
   AuthService,
-  provideRouter(routes)
+
+  provideRouter(routes),
+
+  disableDeprecatedForms(),
+  provideForms()
 ]);

client/src/vendor.ts

@@ -8,6 +8,7 @@ import '@angular/platform-browser';
 import '@angular/platform-browser-dynamic';
 import '@angular/core';
 import '@angular/common';
+import '@angular/forms';
 import '@angular/http';
 import '@angular/router';