diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts index 69c2ed07..63eea4f8 100644 --- a/src/app/pages/login/login.component.ts +++ b/src/app/pages/login/login.component.ts @@ -24,8 +24,7 @@ export class Login { this.email = this.form.controls['email']; this.password = this.form.controls['password']; } - - + public onSubmit(values:Object):void { this.submitted = true; if (this.form.valid) { diff --git a/src/app/pages/register/register.component.ts b/src/app/pages/register/register.component.ts index eff29e6f..1d06b645 100644 --- a/src/app/pages/register/register.component.ts +++ b/src/app/pages/register/register.component.ts @@ -1,8 +1,9 @@ import {Component, ViewEncapsulation} from '@angular/core'; - +import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl} from '@angular/common'; +import {EmailValidator, EqualPasswordsValidator} from '../../theme/validators'; @Component({ - selector: 'login', + selector: 'register', encapsulation: ViewEncapsulation.None, directives: [], styles: [require('./register.scss')], @@ -10,9 +11,38 @@ import {Component, ViewEncapsulation} from '@angular/core'; }) export class Register { - constructor() { + public form:ControlGroup; + public name:AbstractControl; + public email:AbstractControl; + public password:AbstractControl; + public repeatPassword:AbstractControl; + public passwords:ControlGroup; + + public submitted:boolean = false; + + constructor(fb:FormBuilder) { + + this.form = fb.group({ + 'name': ['', Validators.compose([Validators.required, Validators.minLength(4)])], + 'email': ['', Validators.compose([Validators.required, EmailValidator.validate])], + 'passwords': fb.group({ + 'password': ['', Validators.compose([Validators.required, Validators.minLength(4)])], + 'repeatPassword': ['', Validators.compose([Validators.required, Validators.minLength(4)])] + }, {validator: EqualPasswordsValidator.validate('password', 'repeatPassword')}) + }); + + this.name = this.form.controls['name']; + this.email = this.form.controls['email']; + this.passwords = this.form.controls['passwords']; + this.password = this.passwords.controls['password']; + this.repeatPassword = this.passwords.controls['repeatPassword']; } - ngOnInit() { + public onSubmit(values:Object):void { + this.submitted = true; + if (this.form.valid) { + // your code goes here + // console.log(values); + } } } diff --git a/src/app/pages/register/register.html b/src/app/pages/register/register.html index 7224e171..ee1e0007 100644 --- a/src/app/pages/register/register.html +++ b/src/app/pages/register/register.html @@ -1,33 +1,41 @@
-

Sign up to Blur Admin

+

Sign up to ng2-admin

Already have an ng2-admin account? Sign in! -
-
+ +
- +
-
+
- +
-
+
- + +
+
+
+ + +
+ + Password don't match.
- +
diff --git a/src/app/theme/validators/email.validator.ts b/src/app/theme/validators/email.validator.ts new file mode 100644 index 00000000..f31fc8fa --- /dev/null +++ b/src/app/theme/validators/email.validator.ts @@ -0,0 +1,14 @@ +import {Control} from '@angular/common'; + +export class EmailValidator { + + public static validate(c: Control) { + let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i; + + return EMAIL_REGEXP.test(c.value) ? null : { + validateEmail: { + valid: false + } + }; + } +} \ No newline at end of file diff --git a/src/app/theme/validators/equalPasswords.validator.ts b/src/app/theme/validators/equalPasswords.validator.ts new file mode 100644 index 00000000..d843f3c6 --- /dev/null +++ b/src/app/theme/validators/equalPasswords.validator.ts @@ -0,0 +1,16 @@ +import {Control, ControlGroup} from '@angular/common'; + +export class EqualPasswordsValidator { + + public static validate(firstField, secondField) { + + return (c: ControlGroup) => { + + return (c.controls && c.controls[firstField].value == c.controls[secondField].value) ? null : { + passwordsEqual: { + valid: false + } + }; + } + } +} \ No newline at end of file diff --git a/src/app/theme/validators/index.ts b/src/app/theme/validators/index.ts new file mode 100644 index 00000000..f1bab666 --- /dev/null +++ b/src/app/theme/validators/index.ts @@ -0,0 +1,2 @@ +export * from './email.validator'; +export * from './equalPasswords.validator'; \ No newline at end of file