diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts
index 1e8a69771..a5732e083 100644
--- a/client/src/app/shared/forms/form-reactive.ts
+++ b/client/src/app/shared/forms/form-reactive.ts
@@ -21,4 +21,20 @@ export abstract class FormReactive {
}
}
}
+
+ // Same as onValueChanged but force checking even if the field is not dirty
+ protected forceCheck() {
+ for (const field in this.formErrors) {
+ // clear previous error message (if any)
+ this.formErrors[field] = '';
+ const control = this.form.get(field);
+
+ if (control && !control.valid) {
+ const messages = this.validationMessages[field];
+ for (const key in control.errors) {
+ this.formErrors[field] += messages[key] + ' ';
+ }
+ }
+ }
+ }
}
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 14c7a0136..b6be0d782 100644
--- a/client/src/app/videos/video-add/video-add.component.html
+++ b/client/src/app/videos/video-add/video-add.component.html
@@ -15,7 +15,7 @@
-
+ (press enter to add the tag)
+
+ {{ tagsError }}
+
+
@@ -50,6 +55,10 @@
+
+ {{ fileError }}
+
+
diff --git a/client/src/app/videos/video-add/video-add.component.scss b/client/src/app/videos/video-add/video-add.component.scss
index d66df2fd4..11ee3297e 100644
--- a/client/src/app/videos/video-add/video-add.component.scss
+++ b/client/src/app/videos/video-add/video-add.component.scss
@@ -51,6 +51,7 @@ div.file-to-upload {
}
}
-div.progress {
- // height: 40px;
+.little-information {
+ font-size: 0.8em;
+ font-style: italic;
}
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 6eab54f7e..1e700ae48 100644
--- a/client/src/app/videos/video-add/video-add.component.ts
+++ b/client/src/app/videos/video-add/video-add.component.ts
@@ -30,6 +30,10 @@ export class VideoAddComponent extends FormReactive implements OnInit {
currentTag: VIDEO_TAGS.MESSAGES
};
+ // Special error messages
+ tagsError = '';
+ fileError = '';
+
constructor(
private authService: AuthService,
private elementRef: ElementRef,
@@ -57,30 +61,6 @@ export class VideoAddComponent extends FormReactive implements OnInit {
this.form.valueChanges.subscribe(data => this.onValueChanged(data));
}
- getInvalidFieldsTitle() {
- let title = '';
- const nameControl = this.form.controls['name'];
- const descriptionControl = this.form.controls['description'];
-
- if (!nameControl.valid) {
- title += 'A name is required\n';
- }
-
- if (this.tags.length === 0) {
- title += 'At least one tag is required\n';
- }
-
- if (this.filename === null) {
- title += 'A file is required\n';
- }
-
- if (!descriptionControl.valid) {
- title += 'A description is required\n';
- }
-
- return title;
- }
-
ngOnInit() {
this.uploader = new FileUploader({
authToken: this.authService.getRequestHeaderValue(),
@@ -104,6 +84,24 @@ export class VideoAddComponent extends FormReactive implements OnInit {
this.buildForm();
}
+ checkForm() {
+ this.forceCheck();
+
+ if (this.tags.length === 0) {
+ this.tagsError = 'You have 0 tags';
+ }
+
+ if (this.filename === null) {
+ this.fileError = 'You did not add a file.';
+ }
+
+ return this.form.valid === true && this.tagsError === '' && this.fileError === '';
+ }
+
+ fileChanged() {
+ this.fileError = '';
+ }
+
onTagKeyPress(event: KeyboardEvent) {
const currentTag = this.form.value['currentTag'];
@@ -121,6 +119,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
if (this.tags.length >= 3) {
this.form.get('currentTag').disable();
}
+
+ this.tagsError = '';
}
}
}
@@ -135,6 +135,10 @@ export class VideoAddComponent extends FormReactive implements OnInit {
}
upload() {
+ if (this.checkForm() === false) {
+ return;
+ }
+
const item = this.uploader.queue[0];
// TODO: wait for https://github.com/valor-software/ng2-file-upload/pull/242
item.alias = 'videofile';