diff --git a/src/app/main/pages/authentication/register-2/register-2.component.html b/src/app/main/pages/authentication/register-2/register-2.component.html index ed067ad3..549cfada 100644 --- a/src/app/main/pages/authentication/register-2/register-2.component.html +++ b/src/app/main/pages/authentication/register-2/register-2.component.html @@ -32,34 +32,35 @@ - + Name is required - + Email is required - + Please enter a valid email address - + Password is required - + Password confirmation is required - + Passwords must match diff --git a/src/app/main/pages/authentication/register-2/register-2.component.ts b/src/app/main/pages/authentication/register-2/register-2.component.ts index 5ef53f56..fac699d1 100644 --- a/src/app/main/pages/authentication/register-2/register-2.component.ts +++ b/src/app/main/pages/authentication/register-2/register-2.component.ts @@ -1,5 +1,5 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -15,17 +15,10 @@ import { fuseAnimations } from '@fuse/animations'; export class Register2Component implements OnInit, OnDestroy { registerForm: FormGroup; - registerFormErrors: any; // Private private _unsubscribeAll: Subject; - /** - * Constructor - * - * @param {FuseConfigService} _fuseConfigService - * @param {FormBuilder} _formBuilder - */ constructor( private _fuseConfigService: FuseConfigService, private _formBuilder: FormBuilder @@ -46,14 +39,6 @@ export class Register2Component implements OnInit, OnDestroy } }; - // Set the defaults - this.registerFormErrors = { - name : {}, - email : {}, - password : {}, - passwordConfirm: {} - }; - // Set the private defaults this._unsubscribeAll = new Subject(); } @@ -71,14 +56,16 @@ export class Register2Component implements OnInit, OnDestroy name : ['', Validators.required], email : ['', [Validators.required, Validators.email]], password : ['', Validators.required], - passwordConfirm: ['', [Validators.required, confirmPassword]] + passwordConfirm: ['', [Validators.required, confirmPasswordValidator]] }); - this.registerForm.valueChanges + // Update the validity of the 'passwordConfirm' field + // when the 'password' field changes + this.registerForm.get('password').valueChanges .pipe(takeUntil(this._unsubscribeAll)) .subscribe(() => { - this.onRegisterFormValuesChanged(); - }); + this.registerForm.get('passwordConfirm').updateValueAndValidity(); + }); } /** @@ -90,48 +77,19 @@ export class Register2Component implements OnInit, OnDestroy this._unsubscribeAll.next(); this._unsubscribeAll.complete(); } - - // ----------------------------------------------------------------------------------------------------- - // @ Public methods - // ----------------------------------------------------------------------------------------------------- - - /** - * On form values changed - */ - onRegisterFormValuesChanged(): void - { - for ( const field in this.registerFormErrors ) - { - if ( !this.registerFormErrors.hasOwnProperty(field) ) - { - continue; - } - - // Clear previous errors - this.registerFormErrors[field] = {}; - - // Get the control - const control = this.registerForm.get(field); - - if ( control && control.dirty && !control.valid ) - { - this.registerFormErrors[field] = control.errors; - } - } - } } /** - * Confirm password + * Confirm password validator * * @param {AbstractControl} control - * @returns {{passwordsNotMatch: boolean}} + * @returns {ValidationErrors | null} */ -function confirmPassword(control: AbstractControl): any -{ +export const confirmPasswordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { + if ( !control.parent || !control ) { - return; + return null; } const password = control.parent.get('password'); @@ -139,18 +97,18 @@ function confirmPassword(control: AbstractControl): any if ( !password || !passwordConfirm ) { - return; + return null; } if ( passwordConfirm.value === '' ) { - return; + return null; } - if ( password.value !== passwordConfirm.value ) + if ( password.value === passwordConfirm.value ) { - return { - passwordsNotMatch: true - }; + return null; } -} + + return {'passwordsNotMatching': true}; +}; diff --git a/src/app/main/pages/authentication/register/register.component.html b/src/app/main/pages/authentication/register/register.component.html index 7e0ad465..03b37ed5 100644 --- a/src/app/main/pages/authentication/register/register.component.html +++ b/src/app/main/pages/authentication/register/register.component.html @@ -14,34 +14,35 @@ - + Name is required - + Email is required - + Please enter a valid email address - + Password is required - + Password confirmation is required - + Passwords must match diff --git a/src/app/main/pages/authentication/register/register.component.ts b/src/app/main/pages/authentication/register/register.component.ts index aebc79a0..b201cfcd 100644 --- a/src/app/main/pages/authentication/register/register.component.ts +++ b/src/app/main/pages/authentication/register/register.component.ts @@ -1,10 +1,10 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/internal/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/internal/operators'; @Component({ selector : 'register', @@ -15,7 +15,6 @@ import { takeUntil } from 'rxjs/internal/operators'; export class RegisterComponent implements OnInit, OnDestroy { registerForm: FormGroup; - registerFormErrors: any; // Private private _unsubscribeAll: Subject; @@ -40,14 +39,6 @@ export class RegisterComponent implements OnInit, OnDestroy } }; - // Set the defaults - this.registerFormErrors = { - name : {}, - email : {}, - password : {}, - passwordConfirm: {} - }; - // Set the private defaults this._unsubscribeAll = new Subject(); } @@ -65,13 +56,15 @@ export class RegisterComponent implements OnInit, OnDestroy name : ['', Validators.required], email : ['', [Validators.required, Validators.email]], password : ['', Validators.required], - passwordConfirm: ['', [Validators.required, confirmPassword]] + passwordConfirm: ['', [Validators.required, confirmPasswordValidator]] }); - this.registerForm.valueChanges + // Update the validity of the 'passwordConfirm' field + // when the 'password' field changes + this.registerForm.get('password').valueChanges .pipe(takeUntil(this._unsubscribeAll)) .subscribe(() => { - this.onRegisterFormValuesChanged(); + this.registerForm.get('passwordConfirm').updateValueAndValidity(); }); } @@ -84,48 +77,19 @@ export class RegisterComponent implements OnInit, OnDestroy this._unsubscribeAll.next(); this._unsubscribeAll.complete(); } - - // ----------------------------------------------------------------------------------------------------- - // @ Public methods - // ----------------------------------------------------------------------------------------------------- - - /** - * On form values changed - */ - onRegisterFormValuesChanged(): void - { - for ( const field in this.registerFormErrors ) - { - if ( !this.registerFormErrors.hasOwnProperty(field) ) - { - continue; - } - - // Clear previous errors - this.registerFormErrors[field] = {}; - - // Get the control - const control = this.registerForm.get(field); - - if ( control && control.dirty && !control.valid ) - { - this.registerFormErrors[field] = control.errors; - } - } - } } /** - * Confirm password + * Confirm password validator * * @param {AbstractControl} control - * @returns {{passwordsNotMatch: boolean}} + * @returns {ValidationErrors | null} */ -function confirmPassword(control: AbstractControl): any -{ +export const confirmPasswordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { + if ( !control.parent || !control ) { - return; + return null; } const password = control.parent.get('password'); @@ -133,18 +97,18 @@ function confirmPassword(control: AbstractControl): any if ( !password || !passwordConfirm ) { - return; + return null; } if ( passwordConfirm.value === '' ) { - return; + return null; } - if ( password.value !== passwordConfirm.value ) + if ( password.value === passwordConfirm.value ) { - return { - passwordsNotMatch: true - }; + return null; } -} + + return {'passwordsNotMatching': true}; +}; diff --git a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.html b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.html index eb28c43b..5fb068fb 100644 --- a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.html +++ b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.html @@ -32,27 +32,28 @@ - + Email is required - + Please enter a valid email address - + Password is required - + Password confirmation is required - + Passwords must match diff --git a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts index 052beba7..e8d63786 100644 --- a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts +++ b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts @@ -1,10 +1,10 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/internal/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/internal/operators'; @Component({ selector : 'reset-password-2', @@ -15,7 +15,6 @@ import { takeUntil } from 'rxjs/internal/operators'; export class ResetPassword2Component implements OnInit, OnDestroy { resetPasswordForm: FormGroup; - resetPasswordFormErrors: any; // Private private _unsubscribeAll: Subject; @@ -40,13 +39,6 @@ export class ResetPassword2Component implements OnInit, OnDestroy } }; - // Set the defaults - this.resetPasswordFormErrors = { - email : {}, - password : {}, - passwordConfirm: {} - }; - // Set the private defaults this._unsubscribeAll = new Subject(); } @@ -61,15 +53,18 @@ export class ResetPassword2Component implements OnInit, OnDestroy ngOnInit(): void { this.resetPasswordForm = this._formBuilder.group({ + name : ['', Validators.required], email : ['', [Validators.required, Validators.email]], password : ['', Validators.required], - passwordConfirm: ['', [Validators.required, confirmPassword]] + passwordConfirm: ['', [Validators.required, confirmPasswordValidator]] }); - this.resetPasswordForm.valueChanges + // Update the validity of the 'passwordConfirm' field + // when the 'password' field changes + this.resetPasswordForm.get('password').valueChanges .pipe(takeUntil(this._unsubscribeAll)) .subscribe(() => { - this.onResetPasswordFormValuesChanged(); + this.resetPasswordForm.get('passwordConfirm').updateValueAndValidity(); }); } @@ -82,48 +77,19 @@ export class ResetPassword2Component implements OnInit, OnDestroy this._unsubscribeAll.next(); this._unsubscribeAll.complete(); } - - // ----------------------------------------------------------------------------------------------------- - // @ Public methods - // ----------------------------------------------------------------------------------------------------- - - /** - * On form values changed - */ - onResetPasswordFormValuesChanged(): void - { - for ( const field in this.resetPasswordFormErrors ) - { - if ( !this.resetPasswordFormErrors.hasOwnProperty(field) ) - { - continue; - } - - // Clear previous errors - this.resetPasswordFormErrors[field] = {}; - - // Get the control - const control = this.resetPasswordForm.get(field); - - if ( control && control.dirty && !control.valid ) - { - this.resetPasswordFormErrors[field] = control.errors; - } - } - } } /** - * Confirm password + * Confirm password validator * * @param {AbstractControl} control - * @returns {{passwordsNotMatch: boolean}} + * @returns {ValidationErrors | null} */ -function confirmPassword(control: AbstractControl): any -{ +export const confirmPasswordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { + if ( !control.parent || !control ) { - return; + return null; } const password = control.parent.get('password'); @@ -131,18 +97,18 @@ function confirmPassword(control: AbstractControl): any if ( !password || !passwordConfirm ) { - return; + return null; } if ( passwordConfirm.value === '' ) { - return; + return null; } - if ( password.value !== passwordConfirm.value ) + if ( password.value === passwordConfirm.value ) { - return { - passwordsNotMatch: true - }; + return null; } -} + + return {'passwordsNotMatching': true}; +}; diff --git a/src/app/main/pages/authentication/reset-password/reset-password.component.html b/src/app/main/pages/authentication/reset-password/reset-password.component.html index bdb49919..164d14aa 100644 --- a/src/app/main/pages/authentication/reset-password/reset-password.component.html +++ b/src/app/main/pages/authentication/reset-password/reset-password.component.html @@ -14,27 +14,28 @@ - + Email is required - + Please enter a valid email address - + Password is required - + Password confirmation is required - + Passwords must match diff --git a/src/app/main/pages/authentication/reset-password/reset-password.component.ts b/src/app/main/pages/authentication/reset-password/reset-password.component.ts index d231c341..02726c80 100644 --- a/src/app/main/pages/authentication/reset-password/reset-password.component.ts +++ b/src/app/main/pages/authentication/reset-password/reset-password.component.ts @@ -1,5 +1,5 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -15,17 +15,10 @@ import { fuseAnimations } from '@fuse/animations'; export class ResetPasswordComponent implements OnInit, OnDestroy { resetPasswordForm: FormGroup; - resetPasswordFormErrors: any; // Private private _unsubscribeAll: Subject; - /** - * Constructor - * - * @param {FuseConfigService} _fuseConfigService - * @param {FormBuilder} _formBuilder - */ constructor( private _fuseConfigService: FuseConfigService, private _formBuilder: FormBuilder @@ -46,13 +39,6 @@ export class ResetPasswordComponent implements OnInit, OnDestroy } }; - // Set the defaults - this.resetPasswordFormErrors = { - email : {}, - password : {}, - passwordConfirm: {} - }; - // Set the private defaults this._unsubscribeAll = new Subject(); } @@ -67,15 +53,18 @@ export class ResetPasswordComponent implements OnInit, OnDestroy ngOnInit(): void { this.resetPasswordForm = this._formBuilder.group({ + name : ['', Validators.required], email : ['', [Validators.required, Validators.email]], password : ['', Validators.required], - passwordConfirm: ['', [Validators.required, confirmPassword]] + passwordConfirm: ['', [Validators.required, confirmPasswordValidator]] }); - this.resetPasswordForm.valueChanges + // Update the validity of the 'passwordConfirm' field + // when the 'password' field changes + this.resetPasswordForm.get('password').valueChanges .pipe(takeUntil(this._unsubscribeAll)) .subscribe(() => { - this.onResetPasswordFormValuesChanged(); + this.resetPasswordForm.get('passwordConfirm').updateValueAndValidity(); }); } @@ -88,48 +77,19 @@ export class ResetPasswordComponent implements OnInit, OnDestroy this._unsubscribeAll.next(); this._unsubscribeAll.complete(); } - - // ----------------------------------------------------------------------------------------------------- - // @ Public methods - // ----------------------------------------------------------------------------------------------------- - - /** - * On form values changed - */ - onResetPasswordFormValuesChanged(): void - { - for ( const field in this.resetPasswordFormErrors ) - { - if ( !this.resetPasswordFormErrors.hasOwnProperty(field) ) - { - continue; - } - - // Clear previous errors - this.resetPasswordFormErrors[field] = {}; - - // Get the control - const control = this.resetPasswordForm.get(field); - - if ( control && control.dirty && !control.valid ) - { - this.resetPasswordFormErrors[field] = control.errors; - } - } - } } /** - * Confirm password + * Confirm password validator * * @param {AbstractControl} control - * @returns {{passwordsNotMatch: boolean}} + * @returns {ValidationErrors | null} */ -function confirmPassword(control: AbstractControl): any -{ +export const confirmPasswordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { + if ( !control.parent || !control ) { - return; + return null; } const password = control.parent.get('password'); @@ -137,18 +97,18 @@ function confirmPassword(control: AbstractControl): any if ( !password || !passwordConfirm ) { - return; + return null; } if ( passwordConfirm.value === '' ) { - return; + return null; } - if ( password.value !== passwordConfirm.value ) + if ( password.value === passwordConfirm.value ) { - return { - passwordsNotMatch: true - }; + return null; } -} + + return {'passwordsNotMatching': true}; +};