diff options
Diffstat (limited to 'client/src/app/shared/forms')
-rw-r--r-- | client/src/app/shared/forms/form-reactive.ts | 24 | ||||
-rw-r--r-- | client/src/app/shared/forms/form-validators/index.ts | 3 | ||||
-rw-r--r-- | client/src/app/shared/forms/form-validators/url.validator.ts | 11 | ||||
-rw-r--r-- | client/src/app/shared/forms/form-validators/user.ts | 17 | ||||
-rw-r--r-- | client/src/app/shared/forms/form-validators/video.ts | 25 | ||||
-rw-r--r-- | client/src/app/shared/forms/index.ts | 2 |
6 files changed, 82 insertions, 0 deletions
diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts new file mode 100644 index 000000000..1e8a69771 --- /dev/null +++ b/client/src/app/shared/forms/form-reactive.ts | |||
@@ -0,0 +1,24 @@ | |||
1 | import { FormGroup } from '@angular/forms'; | ||
2 | |||
3 | export abstract class FormReactive { | ||
4 | abstract form: FormGroup; | ||
5 | abstract formErrors: Object; | ||
6 | abstract validationMessages: Object; | ||
7 | |||
8 | abstract buildForm(): void; | ||
9 | |||
10 | protected onValueChanged(data?: any) { | ||
11 | for (const field in this.formErrors) { | ||
12 | // clear previous error message (if any) | ||
13 | this.formErrors[field] = ''; | ||
14 | const control = this.form.get(field); | ||
15 | |||
16 | if (control && control.dirty && !control.valid) { | ||
17 | const messages = this.validationMessages[field]; | ||
18 | for (const key in control.errors) { | ||
19 | this.formErrors[field] += messages[key] + ' '; | ||
20 | } | ||
21 | } | ||
22 | } | ||
23 | } | ||
24 | } | ||
diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts new file mode 100644 index 000000000..1d2ae6f68 --- /dev/null +++ b/client/src/app/shared/forms/form-validators/index.ts | |||
@@ -0,0 +1,3 @@ | |||
1 | export * from './url.validator'; | ||
2 | export * from './user'; | ||
3 | export * from './video'; | ||
diff --git a/client/src/app/shared/forms/form-validators/url.validator.ts b/client/src/app/shared/forms/form-validators/url.validator.ts new file mode 100644 index 000000000..67163b4e9 --- /dev/null +++ b/client/src/app/shared/forms/form-validators/url.validator.ts | |||
@@ -0,0 +1,11 @@ | |||
1 | import { FormControl } from '@angular/forms'; | ||
2 | |||
3 | export function validateUrl(c: FormControl) { | ||
4 | let URL_REGEXP = new RegExp('^https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$'); | ||
5 | |||
6 | return URL_REGEXP.test(c.value) ? null : { | ||
7 | validateUrl: { | ||
8 | valid: false | ||
9 | } | ||
10 | }; | ||
11 | } | ||
diff --git a/client/src/app/shared/forms/form-validators/user.ts b/client/src/app/shared/forms/form-validators/user.ts new file mode 100644 index 000000000..5b11ff265 --- /dev/null +++ b/client/src/app/shared/forms/form-validators/user.ts | |||
@@ -0,0 +1,17 @@ | |||
1 | import { Validators } from '@angular/forms'; | ||
2 | |||
3 | export const USER_USERNAME = { | ||
4 | VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(20) ], | ||
5 | MESSAGES: { | ||
6 | 'required': 'Username is required.', | ||
7 | 'minlength': 'Username must be at least 3 characters long.', | ||
8 | 'maxlength': 'Username cannot be more than 20 characters long.' | ||
9 | } | ||
10 | }; | ||
11 | export const USER_PASSWORD = { | ||
12 | VALIDATORS: [ Validators.required, Validators.minLength(6) ], | ||
13 | MESSAGES: { | ||
14 | 'required': 'Password is required.', | ||
15 | 'minlength': 'Password must be at least 6 characters long.', | ||
16 | } | ||
17 | }; | ||
diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts new file mode 100644 index 000000000..3766d4018 --- /dev/null +++ b/client/src/app/shared/forms/form-validators/video.ts | |||
@@ -0,0 +1,25 @@ | |||
1 | import { Validators } from '@angular/forms'; | ||
2 | |||
3 | export const VIDEO_NAME = { | ||
4 | VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(50) ], | ||
5 | MESSAGES: { | ||
6 | 'required': 'Video name is required.', | ||
7 | 'minlength': 'Video name must be at least 3 characters long.', | ||
8 | 'maxlength': 'Video name cannot be more than 50 characters long.' | ||
9 | } | ||
10 | }; | ||
11 | export const VIDEO_DESCRIPTION = { | ||
12 | VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(250) ], | ||
13 | MESSAGES: { | ||
14 | 'required': 'Video description is required.', | ||
15 | 'minlength': 'Video description must be at least 3 characters long.', | ||
16 | 'maxlength': 'Video description cannot be more than 250 characters long.' | ||
17 | } | ||
18 | }; | ||
19 | |||
20 | export const VIDEO_TAGS = { | ||
21 | VALIDATORS: [ Validators.pattern('^[a-zA-Z0-9]{2,10}$') ], | ||
22 | MESSAGES: { | ||
23 | 'pattern': 'A tag should be between 2 and 10 alphanumeric characters long.' | ||
24 | } | ||
25 | }; | ||
diff --git a/client/src/app/shared/forms/index.ts b/client/src/app/shared/forms/index.ts new file mode 100644 index 000000000..588ebb4be --- /dev/null +++ b/client/src/app/shared/forms/index.ts | |||
@@ -0,0 +1,2 @@ | |||
1 | export * from './form-validators'; | ||
2 | export * from './form-reactive'; | ||