Client: update to new form api

2 files changed, 15 insertions, 14 deletions

diff --git a/client/src/app/videos/video-add/video-add.component.html b/client/src/app/videos/video-add/video-add.component.html
index bcd78c7cb..76bb61f7d 100644
--- a/client/src/app/videos/video-add/video-add.component.html
+++ b/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>
diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts
index c0f8cb9c4..900ef1da3 100644
--- a/client/src/app/videos/video-add/video-add.component.ts
+++ b/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({
-      name: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(50) ])),
-      description: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(250) ])),
-      tags: new Control('', Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
+    this.videoForm = new FormGroup({
+      name: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(50) ]),
+      description: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(250) ]),
+      tags: new FormControl('', <any>Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
     });