From d74d76aff00a94ed7d816a79d0bb137d3a0456a0 Mon Sep 17 00:00:00 2001 From: Jeremy Kim Date: Tue, 2 Oct 2018 23:43:32 -0700 Subject: [PATCH 1/3] added password confirmation validation --- src/pages/register/register.html | 20 ++++++++++------- src/pages/register/register.ts | 32 ++++++++++++++++++++++------ src/validators/password.validator.ts | 12 ++++++++++- 3 files changed, 48 insertions(+), 16 deletions(-) diff --git a/src/pages/register/register.html b/src/pages/register/register.html index b5c5ae9e..4337a9fd 100644 --- a/src/pages/register/register.html +++ b/src/pages/register/register.html @@ -47,7 +47,6 @@

Enter a valid name


- Enter a valid email


- +
+ [class.invalid]="!validate.controls.pass.controls.password.valid && (validate.controls.pass.controls.password.dirty || submitAttempt)"> - +

Enter a password between 6-30 characters using only letters and numbers


- + [class.invalid]="!validate.controls.pass.controls.passwordCheck.valid && (validate.controls.pass.controls.passwordCheck.dirty || submitAttempt)"> - -

Passwords do not match

+ +

Password does not match

 + +
diff --git a/src/pages/register/register.ts b/src/pages/register/register.ts index 029f8bd1..4ceb4f8f 100644 --- a/src/pages/register/register.ts +++ b/src/pages/register/register.ts @@ -11,17 +11,35 @@ import { PasswordValidator } from '../../validators/password.validator'; export class RegisterPage { private validate: FormGroup + private confirmPassword: 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.confirmPassword = new FormGroup({ + password: new FormControl('', Validators.compose([ + Validators.minLength(6), + Validators.maxLength(30), + Validators.required, + Validators.pattern('[a-zA-Z0-9 ]*') //'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$' + ])), + passwordCheck: new FormControl('', Validators.required) + }, (formGroup: FormGroup) => { + return PasswordValidator.areEqual(formGroup); + }); + */ + + 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-.]+$')])], + //passwordValidation: this.confirmPassword + 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}) + //password: ['', Validators.compose([Validators.minLength(6), Validators.maxLength(30), Validators.pattern('[a-zA-Z0-9 ]*'), Validators.required])], + //passwordCheck: ['', Validators.required] }) } diff --git a/src/validators/password.validator.ts b/src/validators/password.validator.ts index abd5bfe9..8a253f39 100644 --- a/src/validators/password.validator.ts +++ b/src/validators/password.validator.ts @@ -1,3 +1,12 @@ +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 +38,5 @@ export class PasswordValidator { areEqual: true }; } -} \ No newline at end of file +} +*/ \ No newline at end of file From 621d0090f144276e070220b0ad80d8ecde8d6fb2 Mon Sep 17 00:00:00 2001 From: Jeremy Kim Date: Tue, 2 Oct 2018 23:48:36 -0700 Subject: [PATCH 2/3] cleaned file of notes and unnecessary code --- src/pages/register/register.ts | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/src/pages/register/register.ts b/src/pages/register/register.ts index 4ceb4f8f..a0287e55 100644 --- a/src/pages/register/register.ts +++ b/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'; @@ -11,35 +11,18 @@ import { PasswordValidator } from '../../validators/password.validator'; export class RegisterPage { private validate: FormGroup - private confirmPassword: FormGroup submitAttempt: boolean = false; constructor(public navCtrl: NavController, public navParams: NavParams, private formbuilder: FormBuilder) { - /* - this.confirmPassword = new FormGroup({ - password: new FormControl('', Validators.compose([ - Validators.minLength(6), - Validators.maxLength(30), - Validators.required, - Validators.pattern('[a-zA-Z0-9 ]*') //'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$' - ])), - passwordCheck: new FormControl('', Validators.required) - }, (formGroup: FormGroup) => { - return PasswordValidator.areEqual(formGroup); - }); - */ 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-.]+$')])], - //passwordValidation: this.confirmPassword 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}) - //password: ['', Validators.compose([Validators.minLength(6), Validators.maxLength(30), Validators.pattern('[a-zA-Z0-9 ]*'), Validators.required])], - //passwordCheck: ['', Validators.required] }) } From 3fc0f2bc7cebb8e20e66d27ad4f532a0dea9177c Mon Sep 17 00:00:00 2001 From: Jeremy Kim Date: Wed, 3 Oct 2018 00:44:36 -0700 Subject: [PATCH 3/3] fi.validator.ts --- src/validators/password.validator.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/validators/password.validator.ts b/src/validators/password.validator.ts index 8a253f39..dc83b48e 100644 --- a/src/validators/password.validator.ts +++ b/src/validators/password.validator.ts @@ -1,3 +1,5 @@ +import { AbstractControl } from '@angular/forms' + export const PasswordValidator = (control: AbstractControl): {[key: string]: boolean} => { const password = control.get('password'); const passwordCheck = control.get('passwordCheck');