From 85226e609442d8dcf79a10de9f4a6d4ffee7fe54 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 28 Jun 2018 20:11:36 +0300 Subject: [PATCH 1/3] Fixed: Changing 'password' field while 'passwordConfirm' field is filled doesn't trigger the 'confirmPassword' validator Simplified the class and the template as we don't need an extra object for errors Used native .hasError checks on template --- .../register-2/register-2.component.html | 13 +-- .../register-2/register-2.component.ts | 80 +++++-------------- .../register/register.component.html | 13 +-- .../register/register.component.ts | 76 +++++------------- .../reset-password-2.component.html | 11 +-- .../reset-password-2.component.ts | 76 +++++------------- .../reset-password.component.html | 11 +-- .../reset-password.component.ts | 78 +++++------------- 8 files changed, 105 insertions(+), 253 deletions(-) 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}; +}; From fd4da1e0606f77db72065df24acbbe8726cb07ec Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 28 Jun 2018 20:34:43 +0300 Subject: [PATCH 2/3] Simplified the class and the template as we don't need an extra object for errors Used native .hasError checks on template --- .../forgot-password-2.component.html | 4 +- .../forgot-password-2.component.ts | 63 +----------------- .../forgot-password.component.html | 4 +- .../forgot-password.component.ts | 63 +----------------- .../authentication/lock/lock.component.html | 2 +- .../authentication/lock/lock.component.ts | 64 +------------------ .../login-2/login-2.component.html | 8 ++- .../login-2/login-2.component.ts | 64 +------------------ .../authentication/login/login.component.html | 8 ++- .../authentication/login/login.component.ts | 64 +------------------ .../register-2/register-2.component.html | 4 +- .../register/register.component.html | 4 +- .../reset-password-2.component.html | 4 +- .../reset-password.component.html | 4 +- 14 files changed, 33 insertions(+), 327 deletions(-) diff --git a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.html b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.html index b5eca591..388bcf42 100644 --- a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.html +++ b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.html @@ -32,10 +32,10 @@ - + Email is required - + Please enter a valid email address diff --git a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts index 5a2a75d1..17c4950d 100644 --- a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts +++ b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts @@ -1,7 +1,5 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @@ -12,13 +10,9 @@ import { fuseAnimations } from '@fuse/animations'; styleUrls : ['./forgot-password-2.component.scss'], animations : fuseAnimations }) -export class ForgotPassword2Component implements OnInit, OnDestroy +export class ForgotPassword2Component implements OnInit { forgotPasswordForm: FormGroup; - forgotPasswordFormErrors: any; - - // Private - private _unsubscribeAll: Subject; /** * Constructor @@ -45,14 +39,6 @@ export class ForgotPassword2Component implements OnInit, OnDestroy } } }; - - // Set the defaults - this.forgotPasswordFormErrors = { - email: {} - }; - - // Set the private defaults - this._unsubscribeAll = new Subject(); } // ----------------------------------------------------------------------------------------------------- @@ -67,50 +53,5 @@ export class ForgotPassword2Component implements OnInit, OnDestroy this.forgotPasswordForm = this._formBuilder.group({ email: ['', [Validators.required, Validators.email]] }); - - this.forgotPasswordForm.valueChanges - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe(() => { - this.onForgotPasswordFormValuesChanged(); - }); - } - - /** - * On destroy - */ - ngOnDestroy(): void - { - // Unsubscribe from all subscriptions - this._unsubscribeAll.next(); - this._unsubscribeAll.complete(); - } - - // ----------------------------------------------------------------------------------------------------- - // @ Public methods - // ----------------------------------------------------------------------------------------------------- - - /** - * On form values changed - */ - onForgotPasswordFormValuesChanged(): void - { - for ( const field in this.forgotPasswordFormErrors ) - { - if ( !this.forgotPasswordFormErrors.hasOwnProperty(field) ) - { - continue; - } - - // Clear previous errors - this.forgotPasswordFormErrors[field] = {}; - - // Get the control - const control = this.forgotPasswordForm.get(field); - - if ( control && control.dirty && !control.valid ) - { - this.forgotPasswordFormErrors[field] = control.errors; - } - } } } diff --git a/src/app/main/pages/authentication/forgot-password/forgot-password.component.html b/src/app/main/pages/authentication/forgot-password/forgot-password.component.html index b3d0ccbe..f2170dee 100644 --- a/src/app/main/pages/authentication/forgot-password/forgot-password.component.html +++ b/src/app/main/pages/authentication/forgot-password/forgot-password.component.html @@ -14,10 +14,10 @@ - + Email is required - + Please enter a valid email address diff --git a/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts b/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts index e59477b7..3557ef8f 100644 --- a/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts +++ b/src/app/main/pages/authentication/forgot-password/forgot-password.component.ts @@ -1,7 +1,5 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @@ -12,13 +10,9 @@ import { fuseAnimations } from '@fuse/animations'; styleUrls : ['./forgot-password.component.scss'], animations : fuseAnimations }) -export class ForgotPasswordComponent implements OnInit, OnDestroy +export class ForgotPasswordComponent implements OnInit { forgotPasswordForm: FormGroup; - forgotPasswordFormErrors: any; - - // Private - private _unsubscribeAll: Subject; /** * Constructor @@ -45,14 +39,6 @@ export class ForgotPasswordComponent implements OnInit, OnDestroy } } }; - - // Set the defaults - this.forgotPasswordFormErrors = { - email: {} - }; - - // Set the private defaults - this._unsubscribeAll = new Subject(); } // ----------------------------------------------------------------------------------------------------- @@ -67,50 +53,5 @@ export class ForgotPasswordComponent implements OnInit, OnDestroy this.forgotPasswordForm = this._formBuilder.group({ email: ['', [Validators.required, Validators.email]] }); - - this.forgotPasswordForm.valueChanges - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe(() => { - this.onForgotPasswordFormValuesChanged(); - }); - } - - /** - * On destroy - */ - ngOnDestroy(): void - { - // Unsubscribe from all subscriptions - this._unsubscribeAll.next(); - this._unsubscribeAll.complete(); - } - - // ----------------------------------------------------------------------------------------------------- - // @ Public methods - // ----------------------------------------------------------------------------------------------------- - - /** - * On form values changed - */ - onForgotPasswordFormValuesChanged(): void - { - for ( const field in this.forgotPasswordFormErrors ) - { - if ( !this.forgotPasswordFormErrors.hasOwnProperty(field) ) - { - continue; - } - - // Clear previous errors - this.forgotPasswordFormErrors[field] = {}; - - // Get the control - const control = this.forgotPasswordForm.get(field); - - if ( control && control.dirty && !control.valid ) - { - this.forgotPasswordFormErrors[field] = control.errors; - } - } } } diff --git a/src/app/main/pages/authentication/lock/lock.component.html b/src/app/main/pages/authentication/lock/lock.component.html index e56890b7..0468338a 100644 --- a/src/app/main/pages/authentication/lock/lock.component.html +++ b/src/app/main/pages/authentication/lock/lock.component.html @@ -29,7 +29,7 @@ - + Password is required diff --git a/src/app/main/pages/authentication/lock/lock.component.ts b/src/app/main/pages/authentication/lock/lock.component.ts index b0399f8b..086d7078 100644 --- a/src/app/main/pages/authentication/lock/lock.component.ts +++ b/src/app/main/pages/authentication/lock/lock.component.ts @@ -1,7 +1,5 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @@ -12,13 +10,9 @@ import { fuseAnimations } from '@fuse/animations'; styleUrls : ['./lock.component.scss'], animations : fuseAnimations }) -export class LockComponent implements OnInit, OnDestroy +export class LockComponent implements OnInit { lockForm: FormGroup; - lockFormErrors: any; - - // Private - private _unsubscribeAll: Subject; /** * Constructor @@ -45,15 +39,6 @@ export class LockComponent implements OnInit, OnDestroy } } }; - - // Set the defaults - this.lockFormErrors = { - username: {}, - password: {} - }; - - // Set the private defaults - this._unsubscribeAll = new Subject(); } // ----------------------------------------------------------------------------------------------------- @@ -74,50 +59,5 @@ export class LockComponent implements OnInit, OnDestroy ], password: ['', Validators.required] }); - - this.lockForm.valueChanges - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe(() => { - this.onLockFormValuesChanged(); - }); - } - - /** - * On destroy - */ - ngOnDestroy(): void - { - // Unsubscribe from all subscriptions - this._unsubscribeAll.next(); - this._unsubscribeAll.complete(); - } - - // ----------------------------------------------------------------------------------------------------- - // @ Public methods - // ----------------------------------------------------------------------------------------------------- - - /** - * On form values changed - */ - onLockFormValuesChanged(): void - { - for ( const field in this.lockFormErrors ) - { - if ( !this.lockFormErrors.hasOwnProperty(field) ) - { - continue; - } - - // Clear previous errors - this.lockFormErrors[field] = {}; - - // Get the control - const control = this.lockForm.get(field); - - if ( control && control.dirty && !control.valid ) - { - this.lockFormErrors[field] = control.errors; - } - } } } diff --git a/src/app/main/pages/authentication/login-2/login-2.component.html b/src/app/main/pages/authentication/login-2/login-2.component.html index 9873abd1..6c98e17f 100644 --- a/src/app/main/pages/authentication/login-2/login-2.component.html +++ b/src/app/main/pages/authentication/login-2/login-2.component.html @@ -32,17 +32,19 @@ - + Email is required - + Please enter a valid email address - + Password is required diff --git a/src/app/main/pages/authentication/login-2/login-2.component.ts b/src/app/main/pages/authentication/login-2/login-2.component.ts index f9da1110..5fe9ca97 100644 --- a/src/app/main/pages/authentication/login-2/login-2.component.ts +++ b/src/app/main/pages/authentication/login-2/login-2.component.ts @@ -1,7 +1,5 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @@ -12,13 +10,9 @@ import { fuseAnimations } from '@fuse/animations'; styleUrls : ['./login-2.component.scss'], animations : fuseAnimations }) -export class Login2Component implements OnInit, OnDestroy +export class Login2Component implements OnInit { loginForm: FormGroup; - loginFormErrors: any; - - // Private - private _unsubscribeAll: Subject; /** * Constructor @@ -45,15 +39,6 @@ export class Login2Component implements OnInit, OnDestroy } } }; - - // Set the defaults - this.loginFormErrors = { - email : {}, - password: {} - }; - - // Set the private defaults - this._unsubscribeAll = new Subject(); } // ----------------------------------------------------------------------------------------------------- @@ -69,50 +54,5 @@ export class Login2Component implements OnInit, OnDestroy email : ['', [Validators.required, Validators.email]], password: ['', Validators.required] }); - - this.loginForm.valueChanges - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe(() => { - this.onLoginFormValuesChanged(); - }); - } - - /** - * On destroy - */ - ngOnDestroy(): void - { - // Unsubscribe from all subscriptions - this._unsubscribeAll.next(); - this._unsubscribeAll.complete(); - } - - // ----------------------------------------------------------------------------------------------------- - // @ Public methods - // ----------------------------------------------------------------------------------------------------- - - /** - * On form values changed - */ - onLoginFormValuesChanged(): void - { - for ( const field in this.loginFormErrors ) - { - if ( !this.loginFormErrors.hasOwnProperty(field) ) - { - continue; - } - - // Clear previous errors - this.loginFormErrors[field] = {}; - - // Get the control - const control = this.loginForm.get(field); - - if ( control && control.dirty && !control.valid ) - { - this.loginFormErrors[field] = control.errors; - } - } } } diff --git a/src/app/main/pages/authentication/login/login.component.html b/src/app/main/pages/authentication/login/login.component.html index 8e40bd50..36f0b43a 100644 --- a/src/app/main/pages/authentication/login/login.component.html +++ b/src/app/main/pages/authentication/login/login.component.html @@ -14,17 +14,19 @@ - + Email is required - + Please enter a valid email address - + Password is required diff --git a/src/app/main/pages/authentication/login/login.component.ts b/src/app/main/pages/authentication/login/login.component.ts index cd3a83b7..fc2e2af9 100644 --- a/src/app/main/pages/authentication/login/login.component.ts +++ b/src/app/main/pages/authentication/login/login.component.ts @@ -1,7 +1,5 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { fuseAnimations } from '@fuse/animations'; @@ -12,13 +10,9 @@ import { fuseAnimations } from '@fuse/animations'; styleUrls : ['./login.component.scss'], animations : fuseAnimations }) -export class LoginComponent implements OnInit, OnDestroy +export class LoginComponent implements OnInit { loginForm: FormGroup; - loginFormErrors: any; - - // Private - private _unsubscribeAll: Subject; /** * Constructor @@ -45,15 +39,6 @@ export class LoginComponent implements OnInit, OnDestroy } } }; - - // Set the defaults - this.loginFormErrors = { - email : {}, - password: {} - }; - - // Set the private defaults - this._unsubscribeAll = new Subject(); } // ----------------------------------------------------------------------------------------------------- @@ -69,50 +54,5 @@ export class LoginComponent implements OnInit, OnDestroy email : ['', [Validators.required, Validators.email]], password: ['', Validators.required] }); - - this.loginForm.valueChanges - .pipe(takeUntil(this._unsubscribeAll)) - .subscribe(() => { - this.onLoginFormValuesChanged(); - }); - } - - /** - * On destroy - */ - ngOnDestroy(): void - { - // Unsubscribe from all subscriptions - this._unsubscribeAll.next(); - this._unsubscribeAll.complete(); - } - - // ----------------------------------------------------------------------------------------------------- - // @ Public methods - // ----------------------------------------------------------------------------------------------------- - - /** - * On form values changed - */ - onLoginFormValuesChanged(): void - { - for ( const field in this.loginFormErrors ) - { - if ( !this.loginFormErrors.hasOwnProperty(field) ) - { - continue; - } - - // Clear previous errors - this.loginFormErrors[field] = {}; - - // Get the control - const control = this.loginForm.get(field); - - if ( control && control.dirty && !control.valid ) - { - this.loginFormErrors[field] = control.errors; - } - } } } 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 549cfada..4c330f66 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 @@ -59,8 +59,8 @@ Password confirmation is required - + Passwords must match diff --git a/src/app/main/pages/authentication/register/register.component.html b/src/app/main/pages/authentication/register/register.component.html index 03b37ed5..3669e8b2 100644 --- a/src/app/main/pages/authentication/register/register.component.html +++ b/src/app/main/pages/authentication/register/register.component.html @@ -41,8 +41,8 @@ Password confirmation is required - + Passwords must match 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 5fb068fb..27dc059a 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 @@ -52,8 +52,8 @@ Password confirmation is required - + Passwords must match 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 164d14aa..f68a7cc1 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 @@ -34,8 +34,8 @@ Password confirmation is required - + Passwords must match From 023bfea4dfe7af1a68bf2c999f26b16ab4b1fabc Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 28 Jun 2018 20:59:55 +0300 Subject: [PATCH 3/3] Removed the types definition for Webstorm IDE compatibility --- src/tsconfig.app.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json index 17fb7170..e57578c8 100644 --- a/src/tsconfig.app.json +++ b/src/tsconfig.app.json @@ -2,8 +2,7 @@ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", - "module": "es2015", - "types": ["node"] + "module": "es2015" }, "exclude": [ "src/test.ts",