aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-add
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos/video-add')
-rw-r--r--client/src/app/videos/video-add/video-add.component.html14
-rw-r--r--client/src/app/videos/video-add/video-add.component.ts15
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 @@
2 2
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 3<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
4 4
5<form novalidate (ngSubmit)="upload()" [ngFormModel]="videoForm"> 5<form novalidate (ngSubmit)="upload()" [formGroup]="videoForm">
6 <div class="form-group"> 6 <div class="form-group">
7 <label for="name">Name</label> 7 <label for="name">Name</label>
8 <input 8 <input
9 type="text" class="form-control" name="name" id="name" 9 type="text" class="form-control" name="name" id="name"
10 ngControl="name" #name="ngForm" [(ngModel)]="video.name" 10 [(ngModel)]="video.name"
11 > 11 >
12 <div [hidden]="name.valid || name.pristine" class="alert alert-warning"> 12 <div [hidden]="videoForm.controls.name.valid || videoForm.controls.name.pristine" class="alert alert-warning">
13 A name is required and should be between 3 and 50 characters long 13 A name is required and should be between 3 and 50 characters long
14 </div> 14 </div>
15 </div> 15 </div>
@@ -18,9 +18,9 @@
18 <label for="tags">Tags</label> 18 <label for="tags">Tags</label>
19 <input 19 <input
20 type="text" class="form-control" name="tags" id="tags" 20 type="text" class="form-control" name="tags" id="tags"
21 ngControl="tags" #tags="ngForm" [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag" 21 [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag"
22 > 22 >
23 <div [hidden]="tags.valid || tags.pristine" class="alert alert-warning"> 23 <div [hidden]="videoForm.controls.tags.valid || videoForm.controls.tags.pristine" class="alert alert-warning">
24 A tag should be between 2 and 10 characters (alphanumeric) long 24 A tag should be between 2 and 10 characters (alphanumeric) long
25 </div> 25 </div>
26 </div> 26 </div>
@@ -54,10 +54,10 @@
54 <label for="description">Description</label> 54 <label for="description">Description</label>
55 <textarea 55 <textarea
56 name="description" id="description" class="form-control" placeholder="Description..." 56 name="description" id="description" class="form-control" placeholder="Description..."
57 ngControl="description" #description="ngForm" [(ngModel)]="video.description" 57 [(ngModel)]="video.description"
58 > 58 >
59 </textarea> 59 </textarea>
60 <div [hidden]="description.valid || description.pristine" class="alert alert-warning"> 60 <div [hidden]="videoForm.controls.description.valid || videoForm.controls.description.pristine" class="alert alert-warning">
61 A description is required and should be between 3 and 250 characters long 61 A description is required and should be between 3 and 250 characters long
62 </div> 62 </div>
63 </div> 63 </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 @@
1import { Control, ControlGroup, Validators } from '@angular/common'; 1import { Validators } from '@angular/common';
2import { Component, ElementRef, OnInit } from '@angular/core'; 2import { Component, ElementRef, OnInit } from '@angular/core';
3import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
3import { Router } from '@angular/router'; 4import { Router } from '@angular/router';
4 5
5import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; 6import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
@@ -12,14 +13,14 @@ import { AuthService } from '../../shared';
12 selector: 'my-videos-add', 13 selector: 'my-videos-add',
13 styles: [ require('./video-add.component.scss') ], 14 styles: [ require('./video-add.component.scss') ],
14 template: require('./video-add.component.html'), 15 template: require('./video-add.component.html'),
15 directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES ], 16 directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ],
16 pipes: [ BytesPipe ] 17 pipes: [ BytesPipe ]
17}) 18})
18 19
19export class VideoAddComponent implements OnInit { 20export class VideoAddComponent implements OnInit {
20 currentTag: string; // Tag the user is writing in the input 21 currentTag: string; // Tag the user is writing in the input
21 error: string = null; 22 error: string = null;
22 videoForm: ControlGroup; 23 videoForm: FormGroup;
23 uploader: FileUploader; 24 uploader: FileUploader;
24 video = { 25 video = {
25 name: '', 26 name: '',
@@ -70,10 +71,10 @@ export class VideoAddComponent implements OnInit {
70 } 71 }
71 72
72 ngOnInit() { 73 ngOnInit() {
73 this.videoForm = new ControlGroup({ 74 this.videoForm = new FormGroup({
74 name: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(50) ])), 75 name: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(50) ]),
75 description: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(250) ])), 76 description: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(250) ]),
76 tags: new Control('', Validators.pattern('^[a-zA-Z0-9]{2,10}$')) 77 tags: new FormControl('', <any>Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
77 }); 78 });
78 79
79 80