feat(register): add angular 2 form logic

src/app/pages/login/login.component.ts

@@ -25,7 +25,6 @@ export class Login {
     this.password = this.form.controls['password'];
   }
   
-
   public onSubmit(values:Object):void {
     this.submitted = true;
     if (this.form.valid) {

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 = <ControlGroup> 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);
+    }
   }
 }

src/app/pages/register/register.html

@@ -1,33 +1,41 @@
 <div class="auth-main">
   <div class="auth-block">
-    <h1>Sign up to Blur Admin</h1>
+    <h1>Sign up to ng2-admin</h1>
     <a [routerLink]="['Login']" class="auth-link">Already have an ng2-admin account? Sign in!</a>
 
-    <form class="form-horizontal">
-      <div class="form-group row">
+    <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
+      <div class="form-group row" [ngClass]="{'has-error': (!name.valid && name.touched), 'has-success': (name.valid && name.touched)}">
         <label for="inputName3" class="col-sm-2 control-label">Name</label>
 
         <div class="col-sm-10">
-          <input type="text" class="form-control" id="inputName3" placeholder="Full Name">
+          <input [ngFormControl]="name" type="text" class="form-control" id="inputName3" placeholder="Full Name">
         </div>
       </div>
-      <div class="form-group row">
+      <div class="form-group row" [ngClass]="{'has-error': (!email.valid && email.touched), 'has-success': (email.valid && email.touched)}">
         <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 
         <div class="col-sm-10">
-          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+          <input [ngFormControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
         </div>
       </div>
-      <div class="form-group row">
+      <div class="form-group row" [ngClass]="{'has-error': (!password.valid && password.touched), 'has-success': (password.valid && password.touched)}">
         <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
 
         <div class="col-sm-10">
-          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+          <input [ngFormControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
+        </div>
+      </div>
+      <div class="form-group row" [ngClass]="{'has-error': (!repeatPassword.valid && repeatPassword.touched), 'has-success': (repeatPassword.valid && repeatPassword.touched)}">
+        <label for="inputPassword4" class="col-sm-2 control-label">Repeat</label>
+
+        <div class="col-sm-10">
+          <input [ngFormControl]="repeatPassword" type="password" class="form-control" id="inputPassword4" placeholder="Repeat">
+          <span *ngIf="!passwords.valid && (password.touched || repeatPassword.touched)" class="help-block sub-little-text">Password don't match.</span>
         </div>
       </div>
       <div class="form-group row">
         <div class="col-sm-offset-2 col-sm-10">
-          <button type="submit" class="btn btn-default btn-auth">Sign up</button>
+          <button [disabled]="!form.valid" type="submit" class="btn btn-default btn-auth">Sign up</button>
         </div>
       </div>
     </form>

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
+      }
+    };
+  }
+}

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
+        }
+      };
+    }
+  }
+}

src/app/theme/validators/index.ts

@@ -0,0 +1,2 @@
+export * from './email.validator';
+export * from './equalPasswords.validator';