35 register validation

src/pages/register/register.html

@@ -1,9 +1,3 @@
-<!--
-  Generated template for the RegisterPage page.
-
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
   <ion-navbar>
     <button ion-button menuToggle>
@@ -13,7 +7,6 @@
   </ion-navbar>
 </ion-header>
 
-
 <ion-content >
   <div class="ion-card">
     <div class="card-title">INTRANSITION</div>
@@ -24,17 +17,84 @@
     </p>
     <p><strong>It's a life change
     </strong><p>
-  </div>  
-    <form class="form">
-      <input class="input" type="text" #first placeholder="First Name" > <br>
-      <input class="input" type="text" #last placeholder="First Last"> <br>
-      <input class="input" type="email" #email placeholder="Email Address"> <br>
-      <input class="input" type="password" #pass placeholder="Password"> <br>
-      <input class="input" type="password" #repass placeholder="Password Confirmation">
+  </div>
+
+    <form class="form" [formGroup]='validate' (ngSubmit)='regform()'>
+      <ion-item class="input" no-lines>
+        <ion-input 
+          class="input" 
+          type="text" 
+          #first 
+          placeholder="First Name" 
+          formControlName='first' 
+          [class.invalid]="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
+        </ion-input> 
+      </ion-item>
+      <ion-item class="input" no-lines *ngIf="!validate.controls.first.valid  && (validate.controls.first.dirty || submitAttempt)">
+        <p class="invalid-text">Enter a valid name</p>
+      </ion-item><br>
+
+      <ion-item class="input" no-lines>
+        <ion-input 
+          class="input" 
+          type="text" 
+          #last 
+          placeholder="Last Name" 
+          formControlName='last'
+          [class.invalid]="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)"></ion-input> 
+      </ion-item>
+      <ion-item class="input" no-lines *ngIf="!validate.controls.last.valid  && (validate.controls.last.dirty || submitAttempt)">
+        <p class="invalid-text">Enter a valid name</p>
+      </ion-item><br>
+
+
+      <ion-item class="input" no-lines>
+        <ion-input 
+          class="input" 
+          type="email" 
+          #email 
+          placeholder="Email Address" 
+          formControlName='email'
+          [class.invalid]="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)"></ion-input> 
+      </ion-item>
+      <ion-item class="input" no-lines *ngIf="!validate.controls.email.valid  && (validate.controls.email.dirty || submitAttempt)">
+        <p class="invalid-text">Enter a valid email</p>
+      </ion-item><br>
+
+
+      <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> 
+      </ion-item>
+      <ion-item class="input" no-lines *ngIf="!validate.controls.password.valid  && (validate.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>
+      </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>
+
+      <button id="register-button"color="secondary" ion-button [disabled]="!validate.valid">REGISTER </button>
     </form>
-    <button id="register-button"color="secondary" ion-button>REGISTER </button>
+
     <div class='login2'>
       <p id="sign-in">If you already have an account, sign in.</p>
-    <button id="login-button"color="primary" ion-button>LOGIN</button>
-      </div>
+      <button id="login-button"color="primary" ion-button>LOGIN</button>
+    </div>
+
 </ion-content>

src/pages/register/register.scss

@@ -114,7 +114,8 @@ page-register {
     }
     @media screen and (min-width:1150px) {
       .card-title {
-        font-size: 200px;
+        //edited for portrait mode
+        font-size: 100px; //200px;
      }
       #sign-in {
         margin: 50px auto 0px auto;
@@ -128,5 +129,14 @@ page-register {
         font-size: 40px;
       }
      }
+
+    .invalid {
+      border: 1px solid #ea6153;
+    }
+
+    .invalid-text {
+      font-size: 20px;
+      color: #ea6153;
+    }
 
 }

src/pages/register/register.ts

@@ -1,24 +1,39 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
+import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
+import { PasswordValidator } from '../../validators/password.validator';
 
-/**
- * Generated class for the RegisterPage page.
- *
- * See https://ionicframework.com/docs/components/#navigation for more info on
- * Ionic pages and navigation.
- */
 
 @Component({
   selector: 'page-register',
   templateUrl: 'register.html',
 })
 export class RegisterPage {
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  private validate: FormGroup
+  submitAttempt: boolean = false;
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, private fb: FormBuilder) {
+
+    this.validate = this.fb.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]
+    })
+
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad RegisterPage');
   }
 
+  regForm(){
+    this.submitAttempt = true
+    console.log(this.validate)
+  }
+
 }
+

src/validators/password.validator.ts

@@ -0,0 +1,32 @@
+import { FormControl, FormGroup } from '@angular/forms';
+
+export class PasswordValidator {
+
+  static areEqual(formGroup: FormGroup) {
+    let val;
+    let valid = true;
+
+    for (let key in formGroup.controls) {
+      if (formGroup.controls.hasOwnProperty(key)) {
+        let control: FormControl = <FormControl>formGroup.controls[key];
+
+        if (val === undefined) {
+          val = control.value
+        } else {
+          if (val !== control.value) {
+            valid = false;
+            break;
+          }
+        }
+      }
+    }
+
+    if (valid) {
+      return null;
+    }
+
+    return {
+      areEqual: true
+    };
+  }
+}