Skip to content

Commit 3a416b3

Browse files
jthk1106jthk1106
committed
validators added with invalid messages and styling for all except password check
1 parent 65bc584 commit 3a416b3

4 files changed

Lines changed: 117 additions & 23 deletions

File tree

‎src/pages/register/register.html‎

Lines changed: 71 additions & 14 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>
@@ -13,7 +7,6 @@
137
</ion-navbar>
148
</ion-header>
159

16-
1710
<ion-content >
1811
<div class="ion-card">
1912
<div class="card-title">INTRANSITION</div>
@@ -26,17 +19,81 @@
2619
</strong><p>
2720
</div>
2821
<form class="form" [formGroup]='validate' (ngSubmit)='regform()'>
29-
<ion-input class="input" type="text" #first placeholder="First Name" formControlName='first'></ion-input> <br>
30-
<input class="input" type="text" #last placeholder="Last Name" formControlName='last'> <br>
31-
<input class="input" type="email" #email placeholder="Email Address" formControlName='email'> <br>
32-
<input class="input" type="password" #pass placeholder="Password" formControlName='password'> <br>
33-
<input class="input" type="password" #repass placeholder="Password Confirmation" formControlName='passwordCheck'>
22+
<ion-item>
23+
<ion-input
24+
class="input"
25+
type="text"
26+
#first
27+
placeholder="First Name"
28+
formControlName='first'
29+
[class.invalid]="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
30+
</ion-input>
31+
</ion-item>
32+
<ion-item *ngIf="!validate.controls.first.valid && (validate.controls.first.dirty || submitAttempt)">
33+
<p>Enter a valid name</p>
34+
</ion-item><br>
35+
36+
<ion-item>
37+
<ion-input
38+
class="input"
39+
type="text"
40+
#last
41+
placeholder="Last Name"
42+
formControlName='last'
43+
[class.invalid]="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)"></ion-input>
44+
</ion-item>
45+
<ion-item *ngIf="!validate.controls.last.valid && (validate.controls.last.dirty || submitAttempt)">
46+
<p>Enter a valid name</p>
47+
</ion-item><br>
48+
49+
50+
<ion-item>
51+
<ion-input
52+
class="input"
53+
type="email"
54+
#email
55+
placeholder="Email Address"
56+
formControlName='email'
57+
[class.invalid]="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)"></ion-input>
58+
</ion-item>
59+
<ion-item *ngIf="!validate.controls.email.valid && (validate.controls.email.dirty || submitAttempt)">
60+
<p>Enter a valid email</p>
61+
</ion-item><br>
62+
63+
64+
<ion-item>
65+
<ion-input
66+
class="input"
67+
type="password"
68+
#pass
69+
placeholder="Password"
70+
formControlName='password'
71+
[class.invalid]="!validate.controls.password.valid && (validate.controls.password.dirty || submitAttempt)"></ion-input>
72+
</ion-item>
73+
<ion-item *ngIf="!validate.controls.password.valid && (validate.controls.password.dirty || submitAttempt)">
74+
<p>Enter a password between 6-30 characters using only letters and numbers</p>
75+
</ion-item><br>
76+
77+
78+
<ion-item>
79+
<ion-input
80+
class="input"
81+
type="password"
82+
#repass
83+
placeholder="Password Confirmation"
84+
formControlName='passwordCheck'
85+
[class.invalid]="!validate.controls.passwordCheck.valid && (validate.controls.passwordCheck.dirty || submitAttempt)"></ion-input>
86+
</ion-item>
87+
<ion-item *ngIf="!validate.controls.passwordCheck.valid && (validate.controls.passwordCheck.dirty || submitAttempt)">
88+
<p>Passwords do not match</p>
89+
</ion-item>
3490

3591
<button id="register-button"color="secondary" ion-button [disabled]="!validate.valid">REGISTER </button>
3692
</form>
3793

3894
<div class='login2'>
3995
<p id="sign-in">If you already have an account, sign in.</p>
40-
<button id="login-button"color="primary" ion-button>LOGIN</button>
41-
</div>
96+
<button id="login-button"color="primary" ion-button>LOGIN</button>
97+
</div>
98+
4299
</ion-content>

‎src/pages/register/register.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,5 +128,9 @@ page-register {
128128
font-size: 40px;
129129
}
130130
}
131+
132+
.invalid {
133+
border: 1px solid #ea6153;
134+
}
131135

132136
}

‎src/pages/register/register.ts‎

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

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

127
@Component({
138
selector: 'page-register',
@@ -16,23 +11,29 @@ import { Validators, FormBuilder, FormGroup } from '@angular/forms';
1611
export class RegisterPage {
1712

1813
private validate: FormGroup
14+
submitAttempt: boolean = false;
1915

2016
constructor(public navCtrl: NavController, public navParams: NavParams, private fb: FormBuilder) {
17+
2118
this.validate = this.fb.group({
2219
first: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
2320
last: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
24-
email: ['', Validators.compose([Validators.email, Validators.required])],
25-
password: ['', Validators.compose([Validators.minLength(6), 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])],
2624
passwordCheck: ['', Validators.required]
2725
})
26+
2827
}
2928

3029
ionViewDidLoad() {
3130
console.log('ionViewDidLoad RegisterPage');
3231
}
3332

3433
regForm(){
34+
this.submitAttempt = true
3535
console.log(this.validate)
3636
}
3737

3838
}
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)