Merge pull request #70 from SoftStackFactory/35-register-validation

35 register validation

Author: khoadnguyen

src/pages/register/register.html

@@ -47,7 +47,6 @@
         <p class="invalid-text">Enter a valid name</p>
       </ion-item><br>
 
-      
       <ion-item class="input" no-lines>
         <ion-input 
           class="input" 
@@ -61,33 +60,38 @@
         <p class="invalid-text">Enter a valid email</p>
       </ion-item><br>
 
-      
+    <div formGroupName="pass">
       <ion-item class="input" no-lines>
         <ion-input 
           class="input" 
           type="password" 
           #pass 
           placeholder="Password" 
           formControlName='password'
-          [class.invalid]="!validate.controls.password.valid && (validate.controls.password.dirty || submitAttempt)"></ion-input> 
+          [class.invalid]="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)"></ion-input> 
       </ion-item>
-      <ion-item class="input" no-lines *ngIf="!validate.controls.password.valid  && (validate.controls.password.dirty || submitAttempt)">
+      <ion-item class="input" no-lines *ngIf="!validate.controls.pass.controls.password.valid  && (validate.controls.pass.controls.password.dirty || submitAttempt)">
         <p class="invalid-text">Enter a password between 6-30 characters using only letters and numbers</p>
       </ion-item><br>
 
-      
       <ion-item class="input" no-lines>
         <ion-input 
           class="input" 
           type="password" 
           #repass 
           placeholder="Password Confirmation" 
           formControlName='passwordCheck'
-          [class.invalid]="!validate.controls.passwordCheck.valid && (validate.controls.passwordCheck.dirty || submitAttempt)"></ion-input>
+          [class.invalid]="!validate.controls.pass.controls.passwordCheck.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)"></ion-input>
       </ion-item>
-      <ion-item class="input" no-lines *ngIf="!validate.controls.passwordCheck.valid  && (validate.controls.passwordCheck.dirty || submitAttempt)">
-        <p class="invalid-text">Passwords do not match</p>
+      <ion-item class="input" no-lines *ngIf="!validate.controls.pass.valid  && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)">
+        <p class="invalid-text">Password does not match</p>
       </ion-item>
+      <!--
+      <div class="error" *ngIf="validate.get('pass.passwordCheck').dirty && validate.get('pass.passwordCheck').hasError('nomatch')">
+        Email addresses must match
+      </div>
+      -->
+    </div>
 
       <button id="register-button"color="secondary" ion-button [disabled]="!validate.valid">REGISTER </button>
     </form>

src/pages/register/register.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
-import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
+import { Validators, FormBuilder, FormGroup} from '@angular/forms';
 import { PasswordValidator } from '../../validators/password.validator';
 
 
@@ -13,15 +13,16 @@ export class RegisterPage {
   private validate: FormGroup
   submitAttempt: boolean = false;
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, private fb: FormBuilder) {
-    
-    this.validate = this.fb.group({
+  constructor(public navCtrl: NavController, public navParams: NavParams, private formbuilder: FormBuilder) {
+
+    this.validate = this.formbuilder.group({
       first: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
       last: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
-      email: ['', Validators.compose([Validators.required,
-        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
-      password: ['', Validators.compose([Validators.minLength(6), Validators.maxLength(30), Validators.pattern('[a-zA-Z0-9 ]*'), Validators.required])],
-      passwordCheck: ['', Validators.required]
+      email: ['', Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
+      pass: this.formbuilder.group({
+        password: ['', Validators.compose([Validators.minLength(6), Validators.maxLength(30), Validators.pattern('[a-zA-Z0-9 ]*'), Validators.required])],
+        passwordCheck: ['', Validators.required]
+      }, {validator: PasswordValidator})
     })
 
   }

src/validators/password.validator.ts

@@ -1,3 +1,14 @@
+import { AbstractControl } from '@angular/forms'
+
+export const PasswordValidator = (control: AbstractControl): {[key: string]: boolean} => {
+    const password = control.get('password');
+    const passwordCheck = control.get('passwordCheck');
+    if (!password || !passwordCheck) {
+      return null;
+    }
+    return password.value === passwordCheck.value ? null : { nomatch: true };
+  };
+/*
 import { FormControl, FormGroup } from '@angular/forms';
 
 export class PasswordValidator {
@@ -29,4 +40,5 @@ export class PasswordValidator {
       areEqual: true
     };
   }
-}
+}
+*/