From 4b2f33f3c6d109365090b08244d7f99ad4e69025 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 9 Sep 2016 22:16:51 +0200 Subject: Client: reactive forms --- client/src/app/shared/form-validators/index.ts | 1 - .../app/shared/form-validators/url.validator.ts | 11 ---------- client/src/app/shared/forms/form-reactive.ts | 24 +++++++++++++++++++++ .../src/app/shared/forms/form-validators/index.ts | 3 +++ .../shared/forms/form-validators/url.validator.ts | 11 ++++++++++ .../src/app/shared/forms/form-validators/user.ts | 17 +++++++++++++++ .../src/app/shared/forms/form-validators/video.ts | 25 ++++++++++++++++++++++ client/src/app/shared/forms/index.ts | 2 ++ client/src/app/shared/index.ts | 2 +- 9 files changed, 83 insertions(+), 13 deletions(-) delete mode 100644 client/src/app/shared/form-validators/index.ts delete mode 100644 client/src/app/shared/form-validators/url.validator.ts create mode 100644 client/src/app/shared/forms/form-reactive.ts create mode 100644 client/src/app/shared/forms/form-validators/index.ts create mode 100644 client/src/app/shared/forms/form-validators/url.validator.ts create mode 100644 client/src/app/shared/forms/form-validators/user.ts create mode 100644 client/src/app/shared/forms/form-validators/video.ts create mode 100644 client/src/app/shared/forms/index.ts (limited to 'client/src/app/shared') diff --git a/client/src/app/shared/form-validators/index.ts b/client/src/app/shared/form-validators/index.ts deleted file mode 100644 index f9e9a6191..000000000 --- a/client/src/app/shared/form-validators/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './url.validator'; diff --git a/client/src/app/shared/form-validators/url.validator.ts b/client/src/app/shared/form-validators/url.validator.ts deleted file mode 100644 index 67163b4e9..000000000 --- a/client/src/app/shared/form-validators/url.validator.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { FormControl } from '@angular/forms'; - -export function validateUrl(c: FormControl) { - let URL_REGEXP = new RegExp('^https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$'); - - return URL_REGEXP.test(c.value) ? null : { - validateUrl: { - valid: false - } - }; -} 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 @@ +import { FormGroup } from '@angular/forms'; + +export abstract class FormReactive { + abstract form: FormGroup; + abstract formErrors: Object; + abstract validationMessages: Object; + + abstract buildForm(): void; + + protected onValueChanged(data?: any) { + for (const field in this.formErrors) { + // clear previous error message (if any) + this.formErrors[field] = ''; + const control = this.form.get(field); + + if (control && control.dirty && !control.valid) { + const messages = this.validationMessages[field]; + for (const key in control.errors) { + this.formErrors[field] += messages[key] + ' '; + } + } + } + } +} 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 @@ +export * from './url.validator'; +export * from './user'; +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 @@ +import { FormControl } from '@angular/forms'; + +export function validateUrl(c: FormControl) { + let URL_REGEXP = new RegExp('^https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$'); + + return URL_REGEXP.test(c.value) ? null : { + validateUrl: { + valid: false + } + }; +} 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 @@ +import { Validators } from '@angular/forms'; + +export const USER_USERNAME = { + VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(20) ], + MESSAGES: { + 'required': 'Username is required.', + 'minlength': 'Username must be at least 3 characters long.', + 'maxlength': 'Username cannot be more than 20 characters long.' + } +}; +export const USER_PASSWORD = { + VALIDATORS: [ Validators.required, Validators.minLength(6) ], + MESSAGES: { + 'required': 'Password is required.', + 'minlength': 'Password must be at least 6 characters long.', + } +}; 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 @@ +import { Validators } from '@angular/forms'; + +export const VIDEO_NAME = { + VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(50) ], + MESSAGES: { + 'required': 'Video name is required.', + 'minlength': 'Video name must be at least 3 characters long.', + 'maxlength': 'Video name cannot be more than 50 characters long.' + } +}; +export const VIDEO_DESCRIPTION = { + VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(250) ], + MESSAGES: { + 'required': 'Video description is required.', + 'minlength': 'Video description must be at least 3 characters long.', + 'maxlength': 'Video description cannot be more than 250 characters long.' + } +}; + +export const VIDEO_TAGS = { + VALIDATORS: [ Validators.pattern('^[a-zA-Z0-9]{2,10}$') ], + MESSAGES: { + 'pattern': 'A tag should be between 2 and 10 alphanumeric characters long.' + } +}; 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 @@ +export * from './form-validators'; +export * from './form-reactive'; diff --git a/client/src/app/shared/index.ts b/client/src/app/shared/index.ts index c362a0e4a..af34b4b64 100644 --- a/client/src/app/shared/index.ts +++ b/client/src/app/shared/index.ts @@ -1,5 +1,5 @@ export * from './auth'; -export * from './form-validators'; +export * from './forms'; export * from './rest'; export * from './search'; export * from './users'; -- cgit v1.2.3