Skip to content

Commit a068103

Browse files
khoadnguyenkhoadnguyen
authored
Merge pull request #62 from SoftStackFactory/35-register-validation
35 register validation
2 parents 549da77 + 2869301 commit a068103

4 files changed

Lines changed: 142 additions & 24 deletions

File tree

‎src/pages/register/register.html‎

Lines changed: 77 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
<!--
2-
Generated template for the RegisterPage page.
3-
4-
See http://ionicframework.com/docs/components/#navigation for more info on
5-
Ionic pages and navigation.
6-
-->
71
<ion-header>
82
<ion-navbar>
93
<button ion-button menuToggle>
@@ -23,17 +17,84 @@
2317
</p>
2418
<p><strong>It's a life change
2519
</strong><p>
26-
</div>
27-
<form class="form">
28-
<input class="input" type="text" #first placeholder="First Name" > <br>
29-
<input class="input" type="text" #last placeholder="First Last"> <br>
30-
<input class="input" type="email" #email placeholder="Email Address"> <br>
31-
<input class="input" type="password" #pass placeholder="Password"> <br>
32-
<input class="input" type="password" #repass placeholder="Password Confirmation">
20+
</div>
21+
22+
<form class="form" [formGroup]='validate' (ngSubmit)='regform()'>
23+
<ion-item class="input" no-lines>
24+
<ion-input
25+
class="input"
26+
type="text"
27+
#first
28+
placeholder="First Name"
29+
formControlName='first'
30+
[class.invalid]="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
31+
</ion-input>
32+
</ion-item>
33+
<ion-item class="input" no-lines *ngIf="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
34+
<p class="invalid-text">Enter a valid name</p>
35+
</ion-item><br>
36+
37+
<ion-item class="input" no-lines>
38+
<ion-input
39+
class="input"
40+
type="text"
41+
#last
42+
placeholder="Last Name"
43+
formControlName='last'
44+
[class.invalid]="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)"></ion-input>
45+
</ion-item>
46+
<ion-item class="input" no-lines *ngIf="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
47+
<p class="invalid-text">Enter a valid name</p>
48+
</ion-item><br>
49+
50+
51+
<ion-item class="input" no-lines>
52+
<ion-input
53+
class="input"
54+
type="email"
55+
#email
56+
placeholder="Email Address"
57+
formControlName='email'
58+
[class.invalid]="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)"></ion-input>
59+
</ion-item>
60+
<ion-item class="input" no-lines *ngIf="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)">
61+
<p class="invalid-text">Enter a valid email</p>
62+
</ion-item><br>
63+
64+
65+
<ion-item class="input" no-lines>
66+
<ion-input
67+
class="input"
68+
type="password"
69+
#pass
70+
placeholder="Password"
71+
formControlName='password'
72+
[class.invalid]="!validate.controls.password.valid && (validate.controls.password.dirty || submitAttempt)"></ion-input>
73+
</ion-item>
74+
<ion-item class="input" no-lines *ngIf="!validate.controls.password.valid && (validate.controls.password.dirty || submitAttempt)">
75+
<p class="invalid-text">Enter a password between 6-30 characters using only letters and numbers</p>
76+
</ion-item><br>
77+
78+
79+
<ion-item class="input" no-lines>
80+
<ion-input
81+
class="input"
82+
type="password"
83+
#repass
84+
placeholder="Password Confirmation"
85+
formControlName='passwordCheck'
86+
[class.invalid]="!validate.controls.passwordCheck.valid && (validate.controls.passwordCheck.dirty || submitAttempt)"></ion-input>
87+
</ion-item>
88+
<ion-item class="input" no-lines *ngIf="!validate.controls.passwordCheck.valid && (validate.controls.passwordCheck.dirty || submitAttempt)">
89+
<p class="invalid-text">Passwords do not match</p>
90+
</ion-item>
91+
92+
<button id="register-button"color="secondary" ion-button [disabled]="!validate.valid">REGISTER </button>
3393
</form>
34-
<button id="register-button"color="secondary" ion-button>REGISTER </button>
94+
3595
<div class='login2'>
3696
<p id="sign-in">If you already have an account, sign in.</p>
37-
<button id="login-button"color="primary" ion-button>LOGIN</button>
38-
</div>
97+
<button id="login-button"color="primary" ion-button>LOGIN</button>
98+
</div>
99+
39100
</ion-content>

‎src/pages/register/register.scss‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,8 @@ page-register {
114114
}
115115
@media screen and (min-width:1150px) {
116116
.card-title {
117-
font-size: 200px;
117+
//edited for portrait mode
118+
font-size: 100px; //200px;
118119
}
119120
#sign-in {
120121
margin: 50px auto 0px auto;
@@ -128,5 +129,14 @@ page-register {
128129
font-size: 40px;
129130
}
130131
}
132+
133+
.invalid {
134+
border: 1px solid #ea6153;
135+
}
136+
137+
.invalid-text {
138+
font-size: 20px;
139+
color: #ea6153;
140+
}
131141

132142
}

‎src/pages/register/register.ts‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,39 @@
11
import { Component } from '@angular/core';
22
import { NavController, NavParams } from 'ionic-angular';
3+
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
4+
import { PasswordValidator } from '../../validators/password.validator';
35

4-
/**
5-
* Generated class for the RegisterPage page.
6-
*
7-
* See https://ionicframework.com/docs/components/#navigation for more info on
8-
* Ionic pages and navigation.
9-
*/
106

117
@Component({
128
selector: 'page-register',
139
templateUrl: 'register.html',
1410
})
1511
export class RegisterPage {
1612

17-
constructor(public navCtrl: NavController, public navParams: NavParams) {
13+
private validate: FormGroup
14+
submitAttempt: boolean = false;
15+
16+
constructor(public navCtrl: NavController, public navParams: NavParams, private fb: FormBuilder) {
17+
18+
this.validate = this.fb.group({
19+
first: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
20+
last: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
21+
email: ['', Validators.compose([Validators.required,
22+
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
23+
password: ['', Validators.compose([Validators.minLength(6), Validators.maxLength(30), Validators.pattern('[a-zA-Z0-9 ]*'), Validators.required])],
24+
passwordCheck: ['', Validators.required]
25+
})
26+
1827
}
1928

2029
ionViewDidLoad() {
2130
console.log('ionViewDidLoad RegisterPage');
2231
}
2332

33+
regForm(){
34+
this.submitAttempt = true
35+
console.log(this.validate)
36+
}
37+
2438
}
39+

‎src/validators/password.validator.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { FormControl, FormGroup } from '@angular/forms';
2+
3+
export class PasswordValidator {
4+
5+
static areEqual(formGroup: FormGroup) {
6+
let val;
7+
let valid = true;
8+
9+
for (let key in formGroup.controls) {
10+
if (formGroup.controls.hasOwnProperty(key)) {
11+
let control: FormControl = <FormControl>formGroup.controls[key];
12+
13+
if (val === undefined) {
14+
val = control.value
15+
} else {
16+
if (val !== control.value) {
17+
valid = false;
18+
break;
19+
}
20+
}
21+
}
22+
}
23+
24+
if (valid) {
25+
return null;
26+
}
27+
28+
return {
29+
areEqual: true
30+
};
31+
}
32+
}

0 commit comments

Comments
 (0)